This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 2 years ago.
I need a 30 degree cut at the right bottom and i tried below .
It does not produce exact 30 degree for different text inputs .Could some one help on that
html code:-
<div class="cut-corner">
<p>Stay in the moment. Make every customer matter.</p>
</div>
css code:-
css:-
p {
background: none;
box-shadow: none;
margin: 0;
padding: 0;
color: #color-primary;
z-index:2;
#media #medium {
color: #fff;
font-size: 40px;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 3px;
max-width:50%;
margin-bottom: 10px;
display: inline-block;
padding:30px 50px 30px 40px;
}
}
.bottom-right {
p {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 75%,90% 100%);
}
}
1> if the text is "Stay in the moment. Make every customer matter."
Then the corner is about 39 degree
2> if the text is "Stay in the moment. "
Then the corner is about 23 degree
Thanks
That's because % are used, which depend on the width and height of the element. This can simply be fixed by using a fixed values, like px.
clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%);
I'm using the calc() function in this example because both clip-points start at 100%, for example 75% & 90% were used before, but since I don't know the total width of the element in pixels I simply subtract (24px in this example) from 100%.
Related
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 13 days ago.
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%); //How do i make it continue gradient of body?
border-radius: 20px;
}
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Here's how it looks now
In order to make the border have gradient, i found out that i need to make separate div with background as this gradient and then adjust padding.
What i want to achieve is to make .clock background continue gradient of the body, just like it would without having .border around it.
Just take the gradient property outside and add the class names generally as listed below,
body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
min-height: 100vh;
}
body,.clock {
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
max-width: 200px;
margin: 50px auto 0;
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
}
h2, .clock div {
color: #fff;
}
.clock div {
font-size: 50px;
}
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Here is an idea on how to achieve this. Using nested divs like in your example might not be the easiest solution through, as you'd probably need to overwrite the inner divs background with some js obtained values, as there is no easy way to reset the background like that.
Edit: See this question for a better solution using just CSS: Border Gradient with Border Radius.
Scroll down for a JS solution.
Using css only with border-image
Answer taken from https://css-tricks.com/gradient-borders-in-css/ and adapted.
You can use the border-image css attribute to more easily achieve what you're looking for, if you don't need a border-radius.
I'm just using the wrapper here to increase the viewport of the example.
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border: 15px solid;
border-image-source: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
border-image-slice: 1;
}
.wrapper {
height: 200px;
}
<body>
<div class="wrapper">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
Using JS for an actually working solution
The idea here is that you can manually calculate the position of the clock inside the body element and set the background manually. This solution I present below is specifically tailored for this specific background and assumes things like "it will only ever be inside the parent element and never move outside". A more general solution would need to be much more extensive, but I hope it gets my idea across.
// update the background when scrolling
window.addEventListener("scroll", updateBackgroundColor);
const wrapper = document.querySelector("body");
const clock = document.querySelector(".clock");
function updateBackgroundColor(){
const wrapperRect = wrapper.getBoundingClientRect();
const clockRect = clock.getBoundingClientRect();
// in this case we only care about top and bottom, because the gradient is a straight 180°.
// so we get the relative position inside the outer relevant element
const relativePosition = {
top: (clockRect.top - wrapperRect.top) / wrapperRect.height,
bottom: (clockRect.top + clockRect.height - wrapperRect.top) / wrapperRect.height,
}
// since the gradient only starts at 25% down, we need to adjust the calculation to use those relative values instead
const startPercentage = 0.25;
// this math is just a fancy way of saying "(top - 0.25) * (4/3)" because that is what scales the values for us to the desired range.
relativePosition.top = (relativePosition.top - startPercentage) * ((1 / startPercentage) / ((1 - startPercentage) / startPercentage));
relativePosition.bottom = (relativePosition.bottom - startPercentage) * ((1 / startPercentage) / ((1 - startPercentage) / startPercentage));
// if value is negative, set to 0
if(relativePosition.top < 0) relativePosition.top = 0;
if(relativePosition.bottom < 0) relativePosition.bottom = 0;
let newTopColor = getGradientColor({r:42, g:84, b:112} /*#2a5470*/, {r:76, g:65, b:119} /*#4c4177*/, relativePosition.top);
let newBottomColor = getGradientColor({r:42, g:84, b:112} /*#2a5470*/, {r:76, g:65, b:119} /*#4c4177*/, relativePosition.bottom);
clock.style.background = `linear-gradient(180deg, rgb(${newTopColor.r}, ${newTopColor.g}, ${newTopColor.b}) 0%, rgb(${newBottomColor.r}, ${newBottomColor.g}, ${newBottomColor.b}) 100%)`;
}
// returns the linearly interpolated gradient color value between two colors
// colors are represented as {r:, g:, b:} objects for simplicity
function getGradientColor(color1, color2, percentage){
return {
r: color1.r + ((color2.r - color1.r) * percentage),
g: color1.g + ((color2.g - color1.g) * percentage),
b: color1.b + ((color2.b - color1.b) * percentage),
}
}
// run once so it works immediately not just after the first scrolling
updateBackgroundColor();
body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
min-height: 200vh;
}
body, .clock {
background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}
.border {
padding: 10px;
border-radius: 20px;
background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
max-width: 200px;
margin: 50px auto 0;
position: sticky;
top: 10px;
}
.clock {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
}
h2, .clock div {
color: #fff;
}
.clock div {
font-size: 50px;
}
<!DOCTYPE html>
<html>
<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>
</html>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed last month.
I am trying to draw curve in html and css. I tried but not able to draw it correctly, Could someone please help me. I will attach a picture which I am trying to achieve.
Thanks
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
HTML
<span class="styling">Ali Haider</span>
CSS
.styling {
border:none;
background:green;
color:white;
padding:15px 40px;
text-transform:uppercase;
cursor:pointer;
clip-path: polygon(0 0, 100% 1%, 80% 100%, 0% 100%);
}
This question already has answers here:
How can apply multiple background color to one div
(8 answers)
Generate solid colors using CSS linear-gradient (not smooth colors)
(3 answers)
Closed 1 year ago.
.heading {
background-color: #FFC20E;
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
}
<h3 class="heading">Heading</h3>
I have a heading with 3 background color, how do I do please suggest, for reference I attached image, please help
You can use CSS gradient for this. To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. Here for more information
.heading{
padding:2px;
background: linear-gradient(to left,
#fffb0e 25%, #ffe30e 25% 50%, #FFC20E 50% 100%);
}
<h3 class="heading">Heading</h3>
Use CSS gradient
.heading {
background: #fcc601;
background: -moz-linear-gradient(left, #fcc601 0%, #fcc601 46%, #ffdb71 46%, #ffdb71 73%, #fff0c5 73%, #fff0c5 100%);
background: -webkit-linear-gradient(left, #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);
background: linear-gradient(to right, #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
}
<h3 class="heading">Heading</h3>
You could define a CSS gradient with sharp colour boundaries for the background as
eg: background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
But only a few browsers support that at the moment
See also http://www.webkit.org/blog/1424/css3-gradients/ for an explanation CSS3 gradients, including the sharp colour boundary trick.
.heading {
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
background: linear-gradient(to right,
#ffe30e 50%, #fffb0e 33% 80%, #FFFF8A 33% 100% );
}
<h3 class="heading">Heading</h3>
You can create a div and inside that div, place three spans with a unique background to them and appropriate widths. Now, In the 1st span place your h3 tag.
Here's the code,
HTML ->
<div id="heading-div">
<span id="span1">
<h3>Heading</h3>
</span>
<span id="span2"></span>
<span id="span3"></span>
</div>
CSS ->
#heading-div{
display: flex;
}
#span1{
width: 50%;
background-color: #feab1e;
}
#span2{
width: 25%;
background-color: #ff8059;
}
#span3{
width: 25%;
background-color: #fff;
}
Hi I am trying to create a highlight on a CSS shape as shown below.
There will also be content inside of the hexagon including image and text,
The highlight I am referring to is the part in the top left.
the code I currently have for creating the hexagon is:
HTML
<div class="hexagon-big"></div>
CSS
.hexagon-big {
position: relative;
width: 200px;
height: 115.47px;
background-color: #343434;
}
.hexagon-big:before,
.hexagon-big:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon-big:before {
bottom: 100%;
border-bottom: 57.74px solid #343434;
}
.hexagon-big:after {
top: 100%;
width: 0;
border-top: 57.74px solid #343434;
}
There is other code for the content but i left it out because I don't think it is necessary
Do the hexagon shape differently and you can rely on gradient to create that highlight effect:
.hex {
width: 200px;
display: inline-flex;
margin:0 5px;
background:
conic-gradient(at top,#000 230deg, #0000 0),
linear-gradient(to bottom left,#fff , #000 60%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
.hex::before {
content: "";
padding-top: 115%; /* 100%/cos(30) */
}
<div class="hex"></div>
The solution in this answer is heavily based on the previous answer. To use clip-path and stacked gradients is by far the smartest thing to do here, but I still wanted to post this in order to show, how this solution could be improved and adjusted for your use case (text box, coloring, variables for maintenance, etc.).
.hexagon-big {
/* define box and text space */
width: 200px;
height: 230px;
padding: 10.8% 5px; /* adjust text box padding here; mind that top/bottom tip are part of the box */
box-sizing: border-box; /* width/height should include padding */
/* text formatting (optional) */
color: white;
text-align: center;
/* hex shape */
--hex-col: hsl(0deg 0% 20%); /* just your #343434 as a HSL color */
--hex-shadow: hsl(0deg 0% 50%); /* increased lightness by 15% to define highlight root color; 100% would be fully white */
background:
conic-gradient(at top, var(--hex-col) 232deg, transparent 0), /* change the angle of the shadow at "232deg": increase → narrower, decrease → wider */
linear-gradient(to bottom left, var(--hex-shadow), var(--hex-col) 55%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hexagon-big">
Lorem ipsum dolor sit amet...
</div>
It should also be mentioned that your current way of using border is well better supported by older browsers than clip-path and conic-gradient (same with var()).
If this should be a problem, you might have to add another HTML tag and work out a way with transform: matrix(...) and box-shadow: inset ... (for example).
How do I create a CSS shape in which each side is transformed separately.
Something like the shape in the below image.
Is that possible using CSS only without images?
I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS).
Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the angles and the perspective setting to create the shape exactly as required.
.shape {
background: black;
margin: 100px;
height: 200px;
width: 200px;
transform: perspective(20px) rotateX(-2deg) rotateY(-1deg); /* make perspective roughly 10% of height and width */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>
Or, you could make use of the clip-path feature. Clip paths can be created either by using CSS alone or by using inline SVG. SVG clip paths have much better browser support than the CSS version.
div {
height: 200px;
width: 200px;
background: black;
}
.css-clip {
-webkit-clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
}
.svg-clip {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* Just for demo */
div{
display: inline-block;
margin: 10px;
line-height: 200px;
text-align: center;
color: beige;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- CSS Clip path -->
<div class='css-clip'>CSS Clip Path</div>
<!-- SVG Clip path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M0 0.1, 1 0, 0.85 1, 0.15 0.95' />
</clipPath>
</defs>
</svg>
<div class='svg-clip'>SVG Clip path</div>
Note: Though this shape can be achieved using CSS, it is better not to use CSS for such complex shapes.
As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.
-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
Demo
Have a look here for explanation see here. Basically you will need a rectangle and four triangles or a parallelogram and two rectangles. Depends what you want to achieve.
#trapezium {
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
use this i thing usefull for you.
and any another shape please visited this link http://www.css3shapes.com/