如何用 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"></path>

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

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

演示：

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

以上就是如何用 CSS 创建不规则形状？的详细内容，更多请关注其它相关文章！