hooyantsing's Blog

P85_15_浮动显示区域形状定制

字数统计: 86阅读时长: 1 min
2020/04/15

P85 15 浮动显示区域形状定制

clip-path

定制图形

circle

圆形

855e35e01b2db7e8a2ab2a2e33d400a3.png

1
2
3
4
//默认圆心在中间
clip-path: circle();
//参数:半径 at 圆心x 圆心y
clip-path: circle(50% at 100% 100%);

ellipse

椭圆

5113a5cd41c4e4ee952bd5c0d7f702fd.png

1
2
//参数:x轴径 y轴径
clip-path: ellipse(20% 30%);

polygon

多边形

eeaf771c0f93839bea0574a616583357.png

1
2
//参数:点坐标(x y)
clip-path: polygon(50% 0,100% 100%,0 100%);
CATALOG