clip-path

clip-path的通途

设置元素的可显示区域

clip-path属性

inset 矩形
circle 圆形
ellipse 椭圆
polygon 多边形
path 任意形状
polygon

inset

接受5个参数
clip-path: inset(top right bottom left round border-radius);
如果你需要设置形状的圆角，就必须在前面写上round，用来表示接下来的值是圆角值，也就是说round border-radius是可选值

top right bottom left
上侧、右侧、下侧和左侧向内的偏移量

border-radius
设置形状的圆角

示例：

.inset {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  // 把10px的边框切掉5px
  clip-path: inset(5px 5px 5px 5px);
}

circle

接受2个参数
circle(shape-radius position)

shape-radius
设置形状的圆角大小

position
设置圆形的位置

示例

clip-path: circle(50% at center);
// at center是一个整体，也就是第二个参数

ellipse

接受3个参数
circle(x-shape-radius y-shape-radius position)

x-shape-radius
设置形状的x轴圆角大小

y-shape-radius
设置形状的y轴圆角大小

position
设置圆形的位置

示例

ellipse(40% 50% at left);
// at center是一个整体，也就是第三个参数

polygon

接受2组参数
polygon(fill-rule, x y, x y, x y, ...)

fill-rule
可选参数
指定填充规则

x y
多边形的点，最少3个，但是没有上限，每个点之间用逗号分隔

示例

// 三角形
polygon(nonzero, 50% 0%, 0% 100%, 100% 100%)
// 正方形
polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)

path

接受2组参数
polygon(fill-rule, path)

fill-rule
是否可选：是
默认值：nonzero
用途：指定填充规则

path
是否可选：否
默认值：无
用途：用于定义路径的数据字符串

示例

// 绘制一个三角形
.triangle {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* M 用于移动到起始点 */
  /* L 用于画直线 */
  /* Z 用于闭合路径 */
  clip-path: path("M 50 0 L 100 100 L 0 100 Z");
}

clip-path动画