CSS 像 Border Radius 这样的设计

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

在 active 状态下尝试 border-right: 30px solid transparent;。我想这会解决你的问题。

Answer 3

这样试试：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)。使用边框颜色作为菜单栏颜色。所以它会与背景合并。

CSS 像 Border Radius 这样的设计

CSS design like Border Radius

css

css-shapes