Issue
I recently saw this kind of border (source)
I am talking about the left, yellow border. What I find special about it, is that it is completely straight on the right side of it, so you could put a vertical line next to it that would either hit completely or not at all any of the yellow part:
How can one do such a border in CSS? I explicitely do not want to do something like this:
div {
border-left:5px solid blue;
border-radius:10px;
height:50px;
}
<div></div>
If you put a vertical line next to hit, it will hit the edges of the border:
I hope I described it so one can understand it. Otherwise please feel free to edit this post, thanks.
Solution
A simple background will do it:
.box {
margin:10px;
width:200px;
height:100px;
border-radius:15px;
background: /*width height*/
linear-gradient(gold 0 0) left/10px 100% no-repeat,
#f2f2f2;
}
<div class="box">
</div>
Another syntax:
.box {
margin: 10px;
width: 200px;
height: 100px;
border-radius: 15px;
background: linear-gradient(to right, gold 10px, #f2f2f2 0);
}
<div class="box">
</div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.