This question already has answers here:
creating a responsive diagonal line in element
(2 answers)
Closed 2 years ago.
I want to show the diagonal line inside div,but it shows just the 135 degree line.
Of course there is 135deg , but how can I change the div degree depending on div size???
#ConnectLine{
pointer-events: none;
position: absolute;
z-index:5;
background: linear-gradient(135deg, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
}
<div id="ConnectLine" style="width:100px;height:200px;"></div>
Make use of calc in css
#ConnectLine {
border: 1px solid red;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
}
<div id="ConnectLine" style="width: 100px; height: 200px;"></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:
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>
I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></div>
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>