如何创建底部边框的左上角和右上角半径？

Question

我的项目中有一个选项卡菜单，该活动菜单需要带有左上角和右上角半径的底部边框。看下面的图片-

Answer 1

我会喜欢这样的东西。下面是代表性的例子。为:after菜单元素使用伪元素active。我对border-bottom使用.menu .item，而不对.menu使用active，因此将其更改为.menu { display: flex; justify-content: space-around; width: 100%; } .menu .item { position: relative; width: 50%; text-align: center; font-size: 35px; border-bottom: 2px solid grey; overflow: hidden; } .menu .item.active { border-bottom: 2px solid black; } .menu .item.active:after { display: block; content: ''; position: absolute; bottom: -10px; height: 13px; width: 100%; border: 5px solid black; border-radius: 15px; box-sizing: border-box; }状态。

您可以调整精确值。

摘要

<div class="menu">
  <div class="item active">1</div>
  <div class="item">2</div>
</div>

BaseClass

Answer 2

border-radius：valueOfLeftTop valueOfRightTop ValueOfRightBottom ValueOfLeftBottom;

例如border-radius：3px 3px 0 0;

Answer 3

您可以在CSS菜单中使用此代码

menu{
 border-radius: 4px 4px 0 0;
}