1.之前都是用伪类写，特别麻烦；
2.也可以直接用背景图片，但是鼠标点击某些区域会出现点击错误，降低用户体验。
但是前不久赛博朋克2077发售之后想复写那个按钮样式，机缘巧合发现了一个新属性。

    # 写一个button
    <button id="btn-3">333</button>

   # 在样式使用clip-path属性【标注如下图】
   #btn-3 {
      margin: 390px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 80% 70%, 60% 70%, 60% 100%, 30px 100%, 0% 50px);
    }

标注.png

    # 异形tab按钮【这里用button做简单演示】
    <button id="btn-1">111</button>
    <button id="btn-2">222</button>

   # 在样式使用clip-path属性【效果如下图】
   #btn-1 {
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
   }
   #btn-2 {
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      margin-left: -55px;
   }

tab按钮.png

clip-path属性将所描绘区域外的部分进行裁切，使其未展示部分鼠标移入不会有效果【效果如下图：这里用cursor：wait属性方便展示】

未移入.png

移入.png

缺点：添加border属性，扣除部分边框无法展示【建议配合ui切图使用】

   # 推荐网站
   #【CSS clip-path 生成器】
   https://www.html.cn/tool/css-clip-path/
   https://css-tricks.com/almanac/properties/c/clip-path/

PC端和移动端浏览器支持：如下图【图片来源网站：https://css-tricks.com/almanac/properties/c/clip-path/】

浏览器支持.png