大家好，我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟，官网地址：pakeplus.com
左上角的这张不规则的图片其实是通过clip-path这个css属性实现的，如果没有这个属性，原图片其实是一张正常的：
那怎么实现这种不规则图片展示？
用到的就是css的属性clip-path，官方文档：developer.mozilla.org/zh-CN/docs/…
他甚至能做出来各种形状的图片：
它里面有很多有意思的函数给你用，其中最重要的是path：
path相关的文档：developer.mozilla.org/zh-CN/docs/…
这里用的就是画线和椭圆组成的，在微信小程序里也是支持的：
这里最重要的就是椭圆函数的使用：
developer.mozilla.org/zh-CN/docs/…
椭圆曲线是定义为椭圆的一部分的曲线。有时，使用椭圆曲线绘制高度规则的曲线会比使用贝塞尔曲线更容易。
| 命令 |
参数 |
备注 |
| A |
(rx ry angle large-arc-flag sweep-flag x y)+ |
在当前位置和坐标 x,y 之间绘制一条椭圆曲线。用于绘制圆弧的椭圆中心根据命令的其他参数确定：
<ul>
<li><code>rx</code> 和<code>ry</code> 是椭圆的两个半径；</li>
<li><code>angle</code> 表示椭圆相对于 x 轴的旋转角度；</li>
<li><code>large-arc-flag</code> 和 <code>sweep-flag</code> 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线。
<ul>
<li><code>large-arc-flag</code> 允许选择一个大弧线（<code>1</code>）或一个小弧线（<code>0</code>），</li>
<li><code>sweep-flag</code> 允许选择一条顺时针旋转的弧线（<code>1</code>）或一条逆时针旋转的弧线（<code>0</code>）</li>
</ul>
</li>
</ul>
坐标 <code>x</code>,<code>y</code> 将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的绝对位置的椭圆曲线（<code>A</code>）命令的参数。</td>
</tr>
<tr>
<th scope="row">a</th>
<td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td>
<td>
<p>在当前位置和指定位置之间绘制一条椭圆曲线。指定位置为当前位置沿 x 轴偏移 <code>dx</code> 以及沿 y 轴偏移 <code>dy</code> 处。用于绘制圆弧的椭圆中心根据命令的其他参数确定：</p>
<ul>
<li><code>rx</code> 和 <code>ry</code> 是椭圆的两个半径；</li>
<li><code>angle</code> 表示椭圆相对于 x 轴的旋转角度；</li>
<li><code>large-arc-flag</code> 和 <code>sweep-flag</code> 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线。
<ul>
<li><code>large-arc-flag</code> 允许选择一个大弧线（<code>1</code>）或一个小弧线（<code>0</code>），</li>
<li><code>sweep-flag</code> 允许选择一条顺时针旋转的弧线（<code>1</code>）或一条逆时针旋转的弧线（<code>0</code>）</li>
</ul>
</li>
</ul>
当前位置沿 x 轴偏移 <code>dx</code> 以及沿 y 轴偏移后的位置将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的相对位置的椭圆曲线（<code>a</code>）命令的参数。</td>
</tr>
</tbody>
|
示例
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<!-- 通过弧形标志绘制不同的弧形路径 -->
<path
fill="none"
stroke="red"
d="M 6,10
A 6 4 10 1 0 14,10" />
<path
fill="none"
stroke="lime"
d="M 6,10
A 6 4 10 1 1 14,10" />
<path
fill="none"
stroke="purple"
d="M 6,10
A 6 4 10 0 1 14,10" />
<path
fill="none"
stroke="pink"
d="M 6,10
A 6 4 10 0 0 14,10" />
</svg>
