CSS设计，如边界半径

我想知道是否可以使用边界半径

我想要的是，如果我点击菜单，我希望活动状态是这样的。但我不知道是否可以使用边界半径

到目前为止，我所做的唯一代码就是使用

 border-radius:10px;

---

但我想要的是图像上的类似内容。

您可以使用伪元素并制作一个三角形，该三角形与菜单项重叠，并带有菜单背景色：

例如：

李{ 位置：相对位置； } 李：之后{ 内容：； 宽度：0； 身高：0； 边框样式：实心； 边框宽度：0 20px 20px 0；/*管理从20到您需要的像素值*/ 边框颜色：透明007bff透明；/*使用菜单背景颜色而不是007bff*/ 位置：绝对位置； } 菜单项 尝试右边框：30px实心透明；处于活动状态。 我想这会解决你的问题。

试着这样做：

---

据我所知，使用边界半径是不可取的。可能是伪元素会起作用。您可以根据李的高度和填充调整边框宽度28px。使用边框颜色作为菜单栏颜色。因此，它将与背景合并。

发布您迄今为止尝试的代码？@G.L.p到目前为止，我搜索的唯一代码是边界半径。@G.L.p是否有类似于边界半径的代码可以为您提供与图像中类似的结果？谢谢您的大力帮助=

<ul>
    <li>Menu 1</li>
    <li class="active">Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>

body {
    background-color:#E7D7B7;
}
ul li {
    display:inline-block;
    float:left;
    margin-right:10px;
    position:relative;
    padding:5px 50px 5px 5px;
}
ul li.active {
    display:inline-block;
    float:left;
    background-color:#CA8E26;
    margin-right:10px;
    position:relative;
    padding-right:50px;
}
li.active:after {
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #E7D7B7 transparent transparent;
    content:"";
    position:absolute;
    top:0;
    right:0;
}