纯CSS绘制弯曲曲线图形

发表于 更新于 本文字数： 569 阅读时长 ≈ 2 分钟

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

问题起源

就在昨天，我们通过文章纯CSS绘制五角星简单介绍了CSS中的一个截取属性值：clip-path可以按照指定的方式截取指定形状的图形，并且介绍了clip-path的两种取值：

  1. 按照盒模型取值：margin-box，border-box等

  2. 取函数，如polygon多边形函数，我们了解到可以通过如下方式绘制，或者说截取一个多边形：

    1
    clip-path: polygon(x1 y1, x2 y2, x3 y3, ....)

那么，clip-path还有哪些精妙的取值来绘制图形呢？

今天我们来认识一下其他函数。

inset

改函数定义为截取一个矩形，4个参数分别表示距离外层盒模型的上、右、下、左边界的偏移量。类似margin、padding，也可以通过1,2,4个值来设定4个偏移量。（刚知道这种简略写法被称为：边际速记语法）。

如下所示，第二行类似border-radius，设置截图图形的4角的弧度。

1
2
clip-path: inset(22% 12% 15px 30px);
clip-path: inset(22% 12% 15px 30px round 6px);

如图所示：

完整图形：

image.png

截图代码：

1
clip-path: inset(10% 20% 20% 20% round 280px 10px 10px 280px);

截图效果：

image.png

circle

见字知意，截取一个圆形图案，函数参数解释如下所示：

1
clip-path: circle(6rem at 0rem 0rem);

这段代码表示在盒模型中，以坐标(0rem, 0rem)的位置为圆心，已6rem长度为半径R，截图圆形图案。当然，这个位置截图的效果会是一个扇形。

仍然采用上图为原图，以下代码的截图效果：

1
clip-path: circle(200px at 40% 40%);

image.png

ellipse

同样见字知意，绘制椭圆，其含义为：

1
ellipse(x半径 y半径 as x y)

x, y表示圆心位置。对比circle并不难理解。

代码：clip-path: ellipse(200px 100px at 40% 40%);

截图效果如下：

image.png

遗留了一个未解决的问题

一个图形能否使用两个clip-path截取函数呢？

比如我对完整图形先使用circle截取，如何再对截图后的图案再次进行截取，CSS允许这样做吗？