Skip to content
0
/ Blogs/有趣的 CSS clip-path
6/1/2026
1m
AI 摘要

覆盖 clip-path 基本用法:以 polygon() 百分比顶点裁剪图片为星形等复杂轮廓,并提供可交互 Vue 示例对比代码与效果。

CSS Clip Path

关于 clip-path 属性的一些用法

<img src="/avatar.png" class="target" />
<style scoped>
.target {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}
</style>

Released under the MIT License.