如何将圆角边框仅应用于元素的左侧

Question

我想实现这个目标

但是使用这个CSS

border-left: 3px solid red;
border-radius: 3px;

它正在产生这个结果

请忽略间距，我会添加它

Answer 1

我建议使用

pseudo-classes

来创建红色条。试试这个：

span {
  font-family: Arial;
  font-size: 3em;
}

span::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 40px;
  border-radius: 50px;
  background-color: red;
}

<span>2.1 Cr</span>

Answer 2

使用

border-top-left-radius

和

border-bottom-left-radius

.div{
margin-top:40px;
  width:50px;
  height:10px;
  border-radius:50px;
  background:red;
  transform:rotateZ(90deg);
}

<div class="div"></div>

Answer 3

编辑：

试试这个

小提琴文件：

https://jsfiddle.net/swuzqpbt/

htmlelement {
  position: relative;
  height: 40px;
  border: none;
  margin: 20px auto;;
}
htmlelement ::before {
    content: '';
    display: inline-block;
    background: red;
    width: 5px;
    height: 40px;
    top: 0;
    left: 0;
    border-radius: 140px;
    position: absolute;
    border:none;
}

Answer 4

您的方法不起作用的原因是

border-radius

适用于 element 的角，而不是左边框。

从严格的观察来看，当父级中有多个块元素和/或可变高度时，其他答案就会崩溃。

Stack Overflow 实际上使用块引用来实现您想要的功能：

<- see how the border is rounded?

我已经缩小了他们的工作范围：

blockquote {
  padding-left: 1rem;
  position: relative;
}

blockquote:before {
  background: #c8ccd0;
  border-radius: 10px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

<blockquote>
 <p>first p</p>
 <p>second p</p>
</blockquote>

也适用于跨度。显然，跨度内不会有块元素，但有一个不可知的解决方案是很好的。再次强调，不需要明确的高度，边框只要需要就可以。