一侧彩色边框 [英] One side colored border

问题描述

我最近看到了这种边界(源)

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:

如何在CSS中做这样的边框?我明确地不想做这样的事情:

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.

推荐答案

一个简单的背景就可以做到:

A simple background will do it:

.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>

这篇关于一侧彩色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！