如何用 CSS 创建不规则形状？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何用 CSS 创建不规则形状？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

如何用 css 绘制不规则形状：深入浅出的指南

问题：

如何使用 css 创建本文中所示的不规则形状？

css 实现：

要使用 css 创建此不规则形状，可以使用 clip-path 属性。clip-path 属性允许你使用一个形状蒙版来裁剪一个元素，从而创建自定义的形状。

/* 用 clip-path 来裁剪一个圆形 */
.rounded-shape {
  clip-path: circle(50% at center);
}

对于更复杂的不规则形状，可以使用 svg 路径作为 clip-path 的值。以下是一个用来创建本文中所示形状的路径：

<path id="shape" d="m 0 0 l 40 40 l 80 0 l 40 80 z" />

然后可以在 css 中使用此路径作为 clip-path：

/* 用 SVG 路径来裁剪一个不规则形状 */
.irregular-shape {
  clip-path: url(#shape);
}

演示：

[点击此处查看交互式演示](https://jsbin.com/tawecet)。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何用 CSS 创建不规则形状？》文章吧，也可关注golang学习网公众号了解相关技术文章。