html - CSS中border-bottom的 flex 端

Question

我想让我的边框底部看起来像这样:

有一个 flex 的末端。目前它看起来像这样:

我尝试使用的 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; 这给了我相同的结果，只是两端都是 flex 的。增加这个数字只会使直线向上倾斜。如何使线条看起来正确？

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>