xiaofeihe

css3 clip-path

clip-path

clip-path一个CSS属性，可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏(意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形)。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle()。clip-path属性代替了现在已经弃用的剪切clip属性。

polygon

polygon()函数用于定义一个多边形。它的参数是一组坐标对（<shape-arg> <shape-arg>），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。

兼容性

https://www.caniuse.com/#search=clip-path

avatar

实现圆形

1
2
3
4
5
6
7
8
<div class="circle"></div>

.circle {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  clip-path: circle(40%);
}

实现三角形

1
2
3
4
5
6
7
8
<div class="triangle"></div>

.triangle {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

polygon里面的值对应三角形三个坐标点

avatar

实现五角星

1
2
3
4
5
6
7
8
<div class="pentagram"></div>

.pentagram {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

实现六角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="six"></div>

.six {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  clip-path: polygon(
    50% 0%,
    65.43% 25%,
    93.3% 25%,
    78.87% 50%,
    93.3% 75%,
    64.43% 75%,
    50% 100%,
    35.57% 75%,
    6.7% 75%,
    21.13% 50%,
    6.7% 25%,
    35.57% 25%);
}

avatar

实现椭圆

1
2
3
4
5
6
7
8
<div class="ellipse"></div>

.ellipse {
  width: 150px;
  height: 150px;
  background-color: blueviolet;
  clip-path: ellipse(60px 30px at 50% 50%);
}

at表示position，椭圆的中心点位置

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

https://juejin.im/post/5d2716ab5188257b775d35ba?utm_source=gold_browser_extension#comment

https://www.cnblogs.com/liangdecha/p/9629150.html

https://www.zhangxinxu.com/wordpress/2015/03/css3-clip-path-polygon-shape-transition-animation/