我最近看到了这种边框(source)
我说的是左边的黄色边框。我发现它的特别之处在于它的右侧完全笔直,因此您可以在它旁边放一条垂直线,该垂直线要么完全击中或根本不击中任何黄色部分:
如何在 CSS 中制作这样的边框?我明确不想做这样的事情:
div {
border-left:5px solid blue;
border-radius:10px;
height:50px;
}
<div></div>
如果你在 hit 旁边放一条垂直线,它会碰到边框的边缘:
我希望我的描述是为了让人们能够理解。否则请随时编辑这篇文章,谢谢。
一个简单的背景就可以了:
.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>
另一种语法:
.box {
margin: 10px;
width: 200px;
height: 100px;
border-radius: 15px;
background: linear-gradient(to right, gold 10px, #f2f2f2 0);
}
<div class="box">
</div>