css3的clip-path方法裁切图片（三角形，多边形，圆，椭圆）

HTML

<view class="demo" >
    <image  src="../images/dm.jpg" style="width: 100px;height: 100px;" />
</view>

正常图片

1.裁切为一个三角形或者梯形 使用：polygon裁剪多边形。

Css

.demo{
				-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
			}

剪切梯形：坐标顺序为，右上、右下，左下，左上

.demo{
				-webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
			}

 2.裁切圆 ：创建圆形，需要给circle传入三个值：半径和圆心坐标（x y），用at关键字来定义圆心坐标。（前提是必须是正方形图片，长宽一致才会显示圆形）

.demo{
				-webkit-clip-path: circle(50% at 50% 50%);
			}

 3.裁切椭圆：创建椭圆，需要给ellipse传入四个值：椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。

.demo{
				-webkit-clip-path: ellipse(30% 20% at 50% 50%);
			}

 4.再说下裁切的：矩形裁切，边缘裁切用到的 inset（对应的是距上，距右，距下，距左的位置）

.demo{
				-webkit-clip-path: inset(100px 50px 50px 50px);
			}

 小实例：裁切一个圆角 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)

-webkit-clip-path: inset(25% 0 round 0 25%);