CSS中边框底部的曲线末端

Question

我试图使我的边框看起来像这样:

有一个弯曲的一端.目前它看起来像这样:

我试图使用的CSS是border-bottom-right-radius: 10px;.代码如下所示:

<div class="title">
    lorem ipsum
</div>

.title {
    border-bottom: 10px solid $mainRed;
    border-bottom-right-radius: 10px;
}

我也尝试过border-radius: 10px;,除了两端弯曲外,它给我的结果相同.增加此数字只会使线条向上倾斜.如何使线看起来正确？

Answer 1

这在默认边框内是不可能的,因为border-radius控制元素周围的半径,而不是单个边框边缘.

我建议用伪元素伪装它:

div {
  max-width:50vw;
  padding-bottom:25px;
  position:relative;
}
div:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:red;
  height:20px;
  border-radius:0 10px 10px 0;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Quodsi ipsam honestatem undique pertectam atque absolutam. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt.</div>