一侧彩色边框

Question

最近看到这种边框(source)

我说的是左边的黄色边框。我觉得它的特别之处在于它的右侧是完全笔直的，所以你可以在它旁边放一条垂直线，它要么完全击中黄色部分，要么根本不击中任何黄色部分：

如何在CSS中制作这样的边框？我明确地不想做这样的事情：

div {
  border-left:5px solid blue;
  border-radius:10px;
  height:50px;
}

<div></div>

如果你在 hit 旁边放一条竖线，它会碰到 border 的边缘：

我希望我描述了它以便人们能够理解它。否则请随时编辑此 post，谢谢。

Answer 1

一个简单的背景就可以了：

.box {
 margin:10px;
 width:200px;
 height:100px;
 border-radius:15px;
 background:                     /*width height*/
  linear-gradient(gold,gold) 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>

一侧彩色边框

One side colored border

html

css

border