css - CSS设计，例如Border Radius

This question already has answers here:

Shape with a slanted side (responsive)
                                
                                    （3个答案）
                                
                        
                                4年前关闭。
            
                    
我想知道使用边界半径是否有可能。



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

到目前为止，我唯一完成的代码是使用

 border-radius:10px;

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

最佳答案

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

例如：

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>

关于css - CSS设计，例如Border Radius ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31375942/