css 利用clip-path绘制复杂图案

基础知识

1、circle([ <shape-radius> ]? [ at <position> ]?):定义圆

• 说明 circle()可以传入2个可选参数；

1. shape-radius：圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. position：圆心位置，默认为元素中心点

• 示例 clip-path: circle(50% at 50% 50%);

2、inset(<length-percentage>{1,4} [ round <border-radius> ]?):定义矩形

• 说明 inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
• 示例 clip-path: inset(5% 15% 15% 10% round 2em);

3、ellipse([ <shape-radius>{2} ]? [ at <position> ]?):定义椭圆

• 说明 ellipse()可以传入3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

• 示例 clip-path: ellipse(25% 40% at 50% 50%);

4、polygon(<fill-rule>? , [ <length-percentage> <length-percentage> ]#):定义多边形

• 说明 <fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero 后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

• 示例 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

实践

<div class="clipPath"> </div>

.clipPath {
  width: 680px;
  height: 500px;
  background: rgba(0, 255, 255, 0.6);
  clip-path: polygon(
    30px 0,
    60px 0,
    60px 2px,
    30px 2px,
    2px 30px,
    2px calc(100% - 2px),
    20% calc(100% - 2px),
    calc(20% + 20px) calc(100% - 12px),
    calc(40% + 20px) calc(100% - 12px),
    calc(40% + 32px) calc(100% - 2px),
    calc(100% - 20px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 20px),
    calc(100% - 2px) calc(100% - 74px),
    calc(100% - 14px) calc(100% - 86px),
    calc(100% - 14px) 122px,
    calc(100% - 2px) 110px,
    calc(100% - 2px) 30px,
    calc(100% - 30px) 30px,
    calc(100% - 60px) 2px,
    calc(100% - 180px) 2px,
    calc(100% - 192px) 14px,
    calc(80% - 192px) 14px,
    calc(80% - 222px) 2px,
    260px 2px,
    260px 0px,
    calc(80% - 222px) 0px,
    calc(80% - 192px) 12px,
    calc(100% - 192px) 12px,
    calc(100% - 180px) 0px,
    calc(100% - 60px) 0px,
    calc(100% - 30px) 28px,
    100% 28px,
    100% 110px,
    calc(100% - 12px) 122px,
    calc(100% - 12px) calc(100% - 86px),
    100% calc(100% - 74px),
    100% calc(100% - 20px),
    calc(100% - 18px) 100%,
    calc(40% + 32px) 100%,
    calc(40% + 20px) calc(100% - 10px),
    calc(20% + 20px) calc(100% - 10px),
    20% 100%,
    0 100%,
    0 30px,
    30px 0,
  );
}

图形裁剪网站