This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 1 year ago.
Basically, I have this CSS code that uses a linear gradient to cut a 45-degree chunk out of the corner of my div. However, I want to apply a gradient to the top of the div with the transparent part still there.
What I want
What I have
This is the code I have in CSS
.sectionlabel {
position: absolute;
width: 100%;
color: white;
height: 35px;
top: -35px;
border-top-left-radius: 6px;
background: linear-gradient(225deg, transparent 10px, #676767 0);
}
I'm not completely sure what to add to this to overlay a gradient onto the div.
All help is appreciated!
Thanks,
GraysonDaMighty
Consider using clip-path to cut the edge of an angle.
div {
height: 35px;
width: 200px;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
background-image: linear-gradient(0deg, black, gray 80%);
}
<div></div>
Related
I am trying to create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 2 years ago.
I would like to make my div have a pointy angle but I am not sure of what is the best way to do it.
.top-div {
width: 310px;
height: 25px;
background-color: #A52432;
}
<div class="top-div"></div>
For this kind of effect you could use CSS and make a clip-path like this:
.top-div {
width: 310px;
height: 25px;
background-color: #A52432;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}
<div class="top-div"></div>
You can do it with a simple linear-gradient() which has greater support than clip-path:
.top-div {
width: 310px;
height: 25px;
background: linear-gradient(45deg, transparent 10%, #A52432 10.01%);
}
<div class="top-div"></div>
A div is always a rectangle. I would suggest to place a svg with <polgon> on the divs position (see Polygons).
I'm trying to cut out the top right corner of most of my div elements on my site. These divs are all different sizes. I'm trying to find a responsive way of doing this. I ran into this site here: http://bennettfeely.com/clippy/ which allows you to cut out a custom polygon shape.
Here is what I have so far:
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
}
/* Center the demo */
html, body { height: 100%; }
body {
background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
My question is I'm trying to read these clippings and find out how to make the perfect 45 degree angle cut off the top right corner. As of right now this polygon was created by me freehand. And I'm trying to see what percentages I would need to use to make the perfect 45 degree angle cut from the top right.
With the solution I will be adding the cutoff to most of my divs, buttons, and images.
I found other ways of doing this on Stack Overflow using border-left and right with absolute position, but the problem is I need the div cutoff to be transparent because some of them have background images behind it.
Here is a JS Fiddle that's set up: https://jsfiddle.net/xyvz5z8m/1/
You should be able to do an exact 45 degree clip by using CSS calc, to work out the positions to clip from, instead of the percentages. e.g.
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
div {
width: 100px;
height: 100px;
background: #1e90ff;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
/* Resizing this div just to show that this will remain at 45 degrees */
animation: resize 5s infinite;
}
html, body {
height: 100%;
}
body {
background: #ededed;
display: flex;
justify-content: center;
align-items: center;
}
#keyframes resize {
0% { width: 100px; height: 100px; }
25% { width: 50px; height: 100px; }
50% { width: 50px; height: 50px; }
75% { width: 150px; height: 50px; }
100% { width: 100px; height: 100px; }
}
<div></div>
The key part being that we use pixel sizes for the positioning of the clipped area, and calc(100% - 30px) to get an exact position from the far side of the element, though bare in mind this may have very limited browser support.
This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 7 years ago.
I'm trying to create a div with inside circle at the corner. It should look like the picture shown below
Can someone help to solve this problem?
You could do this:
.box {
width: 200px;
height: 200px;
background:
radial-gradient(circle at 0 100%, transparent 14px, red 15px) bottom left,
radial-gradient(circle at 100% 100%, transparent 14px, red 15px) bottom right,
radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right,
radial-gradient(circle at 0 0, transparent 14px, red 15px) top left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
<div class="box"></div>
More info: Inset border-radius with CSS3
BUT (!) if you need more complexity on the shapes of that border, you could use a background image or a border image:
.box{
width: 200px;
height: 200px;
background: #EEE;
border: 30px solid transparent;
border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}
<div class="box"></div>
More info: Decorative border css
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>