这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战
问题起源
问题起源于最近的生产环境的一个项目，需要在页面上绘制几条曲线，想让美工帮我直接抠图做背景，结果被拒绝了，OK，我自己画，哼~
生产环境的图形大概长这个样子：
虽然只有几个线条，但是怎么画我当时是这样想的：
嗯，大脑一片空白！没处理过这样的事情。
解决过程
当然，首先是去搜索引擎去查找“如何使用CSS绘制曲线线条”，“如何使用CSS绘制任意曲线”
搜索到的解决方案大致有：
多DOM的border拼接
通过多个DOM上设置单边框/双边框，并通过设置border-radius使得线条进行弯曲，调整不同DOM的位置使线条拼接起来，从而造成一整条弯曲线条的假象。
这种方式很直观，也很容易理解，也没有难点。但这个方法只能绘制简单的曲线条，如果线条比较复杂则会造成DOM过多的情况。
当然，最终，我们在项目中使用的是这种方法，这也基于项目设计图上的线条简单，通过两三个多余DOM即可实现。
自定义svg：path
之前没有了解过SVG。在前几天学习clip-path时，唯一没有介绍的一个函数path('..')进入了我们的视线，我们来尝试一下，如何使用path绘制曲线。
在clip-path的MDN文档中，有一个path的例子:
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
对图形的裁剪效果如下：
那么如何绘制线条，或者path中的参数怎么理解呢？
不需要理解，我们直接上工具：
- svg-path-visualizer.netlify.app/ 通过这个网站我们可以可视化的绘制图形，我们来尝试一下：
clip-path: path('M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z');
- jxnblk.github.io/paths/ 可以可视化的拖动节点，添加节点与曲线：
我们来测试实际效果：
clip-path:path('M0 4 C32 64 58 10 56 48 C18 48 50 16 28 18 Z');
最终切割效果：
通过数次实验，我们基本可以得出，如果想要使用path绘制曲线，不应该用clip-path，而应该用SVG背景才可以，而且现在photoshop等工具也支持SVG制作。
其他画曲线的方式如下面两种本文暂不做介绍了，等待后续吧！
