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

Question

我想实现这个

但是使用这个css

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

它正在产生这个结果

请忽略间距，我会添加

Answer 1

已编辑：

试试这个

Fiddle 文件:

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

我建议使用 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>

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

how to apply rounded border to only left side of element

html

css

styling