如何实现带透明切角的CSS按钮？现有伪元素方案无法透明
2026-7-9
带透明切角按钮的实现需求
目标效果示例：
我希望创建带有透明切角的按钮。目前采用的方案是使用1个:before伪元素和1个:after伪元素，通过固定颜色覆盖原按钮不必要的边框并添加内部边框，但该方案存在伪元素无法透明的问题，实际效果如下：
需要说明的是，我清楚如何调整元素位置，只是寻求能实现切角透明的其他方案。
内容的提问来源于stack exchange，提问作者Luis
相关产品推荐
相关产品推荐
目标效果示例：
我希望创建带有透明切角的按钮。目前采用的方案是使用1个:before伪元素和1个:after伪元素，通过固定颜色覆盖原按钮不必要的边框并添加内部边框，但该方案存在伪元素无法透明的问题，实际效果如下：
需要说明的是，我清楚如何调整元素位置，只是寻求能实现切角透明的其他方案。
内容的提问来源于stack exchange，提问作者Luis
