像Border Radius这样的CSS设计

Question

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

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

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

 border-radius:10px;

但我想要的是图像上的那种。

Answer 1

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

例如：

li{
  position: relative;
  }
li:after{
       content: "";
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 0 20px 20px 0;/*manage px values from 20 to what your need suits*/
       border-color: transparent #007bff transparent;/*use menu bg color instead of #007bff*/
       position: absolute;
    }

<ul>
  <li>menu item</li>
</ul>

Answer 2

请尝试以下操作： Demo

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

<强> CSS：

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

据我所知，不建议使用border-radius。可能是伪元素将起作用。您可以根据li's高度和填充调整边框宽度（28px）。使用边框颜色作为菜单栏颜色。所以它会与背景合并。

Answer 3

在border-right: 30px solid transparent;州尝试active。 我认为这将解决您的问题。