CSS leaner gradient effect [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to get the following style in my div border in both sides:
1. if the height of the div is X.
2. I want 4px from to top to start some gradient color.
3. i want 4px from the bottom to start some gradient color.(same color)
so it will look like this:
|4px transparent
|start white to black gradient
|
|End the black here
|start black to white gradient (the other direction)
|
|
|end the white here
|4px transparet

Answer 1

All that you needed to do was create the gradient and assign it to the border-image property. This is well supported in modern browsers and can be used unless you wish to support IE10-.
div {
height: 100px;
width: 200px;
border-style: solid;
border-width:0px 4px;
border-image: linear-gradient(to bottom, transparent 4px, red 4px, orange 50%, red calc(100% - 4px), transparent calc(100% - 4px));
border-image-slice: 1;
border-image-repeat: stretch;
background: beige;
}
<div>Some div</div>
Here's how to interpret the linear-gradient that was used in the above snippet:
linear-gradient(to bottom, /* the direction of the gradient */
transparent 4px, /* make it transparent till 4px from start */
red 4px, /* start with the required color exactly at 4px */
orange 50%, /* make it change from red to orange at 50% - half distance */
red calc(100% - 4px), /* change it back from orange to red at 4px before 100% */
transparent calc(100% - 4px) /* leave the last 4px as transparent again */
);

Answer 2

You can achieve this with some styling tricks
Firstly, instead of borders we use positioned pseudo-elements (left/right since you indicated height as the determining factor).
We use 4px top and bottom padding to create the transparent sections (and background-clip so the gradient background doesn't extend into the padding).
Then it's a simple linear gradient.
*,
::before,
::after {
box-sizing: border-box;
}
body {
background: pink;
}
div {
height: 90vh;
width: 60%;
margin: 5vh auto;
background: #c0ffee;
position: relative;
}
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
padding: 4px 0;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom, white, black 50%, white);
}
div::before {
left: -2px;
}
div::after {
right: -2px;
}
<div>
</div>
More complex gradient using calc and no additional clipping / padding
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom,
transparent,
transparent 4px,
white 4px,
black 50%,
white calc(100% - 4px),
transparent calc(100% - 4px),
transparent);
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
background: pink;
}
div {
height: 90vh;
width: 60%;
margin: 5vh auto;
background: #c0ffee;
position: relative;
}
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom,
transparent,
transparent 4px,
white 4px,
black 50%,
white calc(100% - 4px),
transparent calc(100% - 4px),
transparent);
}}
div::before {
left: -2px;
}
div::after {
right: -2px;
}
<div>
</div>