最常用的是 polygon() 多边形裁剪：clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%) 一行切出带斜角的横幅；circle(50% at 50% 50%) 切圆；inset(10px round 8px) 切内切矩形。坐标系以元素左上角为原点，支持百分比。
与 overflow:hidden 的区别：overflow 裁剪的是「内容溢出」，且受 border-radius / 绝对定位子元素逃逸等问题困扰；clip-path 直接按几何形状裁掉绘制与命中区域，干净利落。配合 transition 只能平滑插值同类型路径（顶点数一致），否则瞬变。
<style> .shapes { display:flex; gap:16px; padding:24px; flex-wrap:wrap; } .b { width:120px; height:90px; background:linear-gradient(135deg,#4a9eff,#a371f7); transition: clip-path .3s; } .p1 { clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); } .p2 { clip-path: circle(38% at 50% 50%); } .p3 { clip-path: inset(8% round 12px); } .b:hover { clip-path: none; } /* 悬停恢复完整矩形 */ </style> <div class="shapes"> <div class="b p1">斜角横幅</div> <div class="b p2">圆形</div> <div class="b p3">圆角内切</div> </div>