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
