左上角的这张不规则的图片其实是通过clip-path这个css属性实现的，如果没有这个属性，原图片其实是一张正常的：
那怎么实现这种不规则图片展示？
用到的就是css的属性clip-path，官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/clip-path
他甚至能做出来各种形状的图片：
它里面有很多有意思的函数给你用，其中最重要的是path：
path相关的文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths
这里用的就是画线和椭圆组成的，在微信小程序里也是支持的：
这里最重要的就是椭圆函数的使用：
椭圆曲线是定义为椭圆的一部分的曲线。有时，使用椭圆曲线绘制高度规则的曲线会比使用贝塞尔曲线更容易。
| 命令 | 参数 | 备注 |
| A | (rx ry angle large-arc-flag sweep-flag x y)+ | 在当前位置和坐标 x,y 之间绘制一条椭圆曲线。用于绘制圆弧的椭圆中心根据命令的其他参数确定： * rx 和ry 是椭圆的两个半径； * angle 表示椭圆相对于 x 轴的旋转角度； * large-arc-flag 和 sweep-flag 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线。 * large-arc-flag 允许选择一个大弧线（1）或一个小弧线（0）， * sweep-flag 允许选择一条顺时针旋转的弧线（1）或一条逆时针旋转的弧线（0） 坐标 x,y 将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的绝对位置的椭圆曲线（A）命令的参数。 |
| a | (rx ry angle large-arc-flag sweep-flag dx dy)+ |
在当前位置和指定位置之间绘制一条椭圆曲线。指定位置为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处。用于绘制圆弧的椭圆中心根据命令的其他参数确定： * rx 和 ry 是椭圆的两个半径； * angle 表示椭圆相对于 x 轴的旋转角度； * large-arc-flag 和 sweep-flag 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线。 * large-arc-flag 允许选择一个大弧线（1）或一个小弧线（0）， * sweep-flag 允许选择一条顺时针旋转的弧线（1）或一条逆时针旋转的弧线（0） 当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移后的位置将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的相对位置的椭圆曲线（a）命令的参数。 |
|---|
示例
<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>