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