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控制元素周围的半径，而不是单个边框边缘。

我建议使用伪元素伪装它：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不知道这是否是最好的解决方案，但它确实存在：

<style>
.title .underline {
    border-top: 10px solid red;
    border-top-right-radius: 10px;
    border-bottom: 10px solid red;
    border-bottom-right-radius: 10px;
}
</style>

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

Answer 3

将此添加到您的CSS：

border-top-right-radius: 10px;

在你的其他CSS下面。最终应该说谎：

＆＃13;

＆＃13;

.title {
    border-bottom: 10px solid red;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

＆＃13;

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 class="title"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

border-bottom-right-radius: 10px;
border-top-right-radius: 10px;