CSS中border-bottom的曲线端点

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;，结果是两端都圆弧了。增加这个数值只会使线条向上倾斜。如何让线条看起来正确？

- Virge Assault

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>

- Niels Keurentjes

---

我相信你错了。 - GrumpyCrouton

@Grumpy请在您的回答中包含一个可工作的示例，然后我们将继续讨论。 - Niels Keurentjes

完成。我不明白它们有什么不同？如果有的话，请解释一下，因为看起来效果是一样的。我喜欢学习，不是在挖苦别人。 - GrumpyCrouton

@Grumpy，这个想法是将内容放在它所属的div中。你只是引入了一个空元素来实现与我的解决方案中伪元素相同的效果，而不会污染HTML。我建议阅读语义化HTML ，特别是将内容和表现分别放在HTML和CSS中的考虑因素。如果存在不引入非语义HTML的表现问题解决方案，则始终更可取。 - Niels Keurentjes

好主意！我的设计师同事们会很高兴 :D - nclsvh

不错的方法！我使用的框架（sapui5）似乎已经使用了::after伪类，所以我成功地使用了::before伪类获得了相同的效果。希望这能帮到其他人 ;) - Axel Samyn

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>

- CJ Nimes

Answer 3

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

- Andy

---

这并没有回答问题，border-top-right-radius 控制的是元素的右上角，而不是所要求的底部边框。 - Niels Keurentjes

抱歉，我误解了问题。 - Andy

Answer 4

将以下代码添加到您的CSS文件中：

border-top-right-radius: 10px;

在你的其他CSS下方。最终应该像这样：

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

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>

- GrumpyCrouton

---

这并没有回答问题，border-top-right-radius 控制的是元素的右上角，而不是所要求的底部边框。 - Niels Keurentjes