四个角斜切，悬停时切角还原成直角，几何感十足
← 返回 卡片 类特效列表clip-path polygon 裁剪
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .cl{width:250px;margin:40px auto;padding:26px 22px;background:linear-gradient(135deg,#e5534b,#f778ba);color:#fff;clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);transition:clip-path .3s}
.fx .cl:hover{clip-path:polygon(0 0,0 0,100% 0,100% 100%,100% 100%,0 100%)}
.fx .cl h4{margin:0 0 6px}
.fx .cl p{margin:0;font-size:13px;opacity:.9}<div class="fx">
<div class="cl"><h4>斜切角卡片</h4><p>clip-path polygon 裁剪</p></div>
</div>