路径裁剪

@Clip-path

Introduction

. 按照指定的形状/路径裁剪背景色/背景图像，如扫光、暗夜模式切换

. 会导致内容、阴影、边框等显示缺失/被切掉

. 不会影响伪元素的内容

. 裁剪方式：圆 circle、椭圆 eclipse、多边形 polygon 等等

. 最佳体验：对伪元素背景裁剪

. 不要直接用到 <html> 或 <body>

. 更多裁剪方式，请访问 clip-path maker

inset()

. 使用内嵌矩形裁剪

. 距离/大小/百分比和可选的圆角；参数个数遵循上右下左的原则

. 更多案例，请访问 inset()

clip-path: inset(length/percentage [ round border-radius ])

circle()

. 使用圆裁剪

. 1个半径 radius；1个位置 position；默认是图像中心

. 更多案例，请访问 circle()

clip-path: circle(radius [ at x y ])

[] 定制单选/多选按钮

code read sing

.cb[type='checkbox'] {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #f1f1f1;
  clip-path: circle(50%);
  accent-color: var(--main-color);
}

.cb[type='checkbox']:checked {
  appearance: auto;
}

或者选中时，使用伪元素模拟符号；这里使用阿里字体图标

.cb[type=checkbox]:checked::before {
  content: '\e6aa';
  font-family: 'iconfont';
  color: #f40;
  font-size: 18px;
}

eclipse()

. 使用椭圆裁剪

. 2个半径 radius；1个位置 position；默认是图形中心

clip-path: eclipse(rx ry [ at x y ])

polygon

. 裁剪的顶点顺序不做要求，按照一定的方向即可

1. 菱形

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

2. 三角形

. 还可以使用0大小粗边框元素创建三角形，见边框一节

clip-path: polygon(50% 0, 0 100%, 100% 100%);

或

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

或

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

path()

. 自定义路径裁剪；功能最强大

. M：移动

. L：画线

. A：画弧；rx ry x-axis-rotation large-arc-flag sweep-flag x y

. 更多案例，请访问 Path A

A 参数
item	desc
rx	椭圆的长半轴；x方向半径
ry	椭圆的短半轴；y方向半径
x-axis-rotation	椭圆相对于当前坐标系旋转的角度；单位是度数
large-arc-flag	弧度选择；0：小弧；1：大弧
sweep-flag	弧线绘制方向；0：逆时针；1：顺时针
x y	圆弧终点坐标

案例 Cases

[] 图文混排

. float

. shape-outside

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi unde laudantium dicta ullam ab minus numquam qui totam deleniti eligendi a molestiae, voluptas aliquid exercitationem necessitatibus consectetur omnis natus debitis maiores dignissimos velit quibusdam! Velit labore eligendi error et eaque dolorem illum doloremque similique sequi est, voluptatum nemo officiis, sit atque quisquam itaque. Odit magnam nesciunt nostrum error perspiciatis. Atque harum earum velit tenetur ut ipsa repudiandae neque cupiditate reprehenderit magnam, aliquam eius ea dolor aliquid necessitatibus cum aperiam odit unde esse ex illo? Eveniet.

.cp-img5 {
    float: left;
    width: 30%;
    width: 48%;
    clip-path: polygon(0 0, 50% 50%, 0 100%);
    shape-outside: polygon(0 0, 50% 50%, 0 100%);
}

.cp-img6 {
    float: right;
    width: 30%;
    width: 48%;
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    shape-outside: polygon(100% 0, 100% 100%, 50% 50%);
}

[] 聚光灯

. 裁剪圆或椭圆剪切，并改变剪切位置

. 文字叠加

. 分布体会上下文字使用路径剪切的效果

. 尝试增加模糊滤镜

you are the world.

[] 扫光按钮

1. 静态效果

. 伪元素：分别切俩个对角出来

Hover Me

.cp-btn::before {
    clip-path: inset(0 98px 10px 0);
}

.cp-btn::after {
    clip-path: inset(10px 0 0 98px);
}

2. 动态效果

. 伪元素：分别切4个边出来；box-sizing

. 增加帧动画

Hover Me

@keyframes cp {

    /* top */
    0%, 100% {
        clip-path: inset(0 0 34px 0);
    }

    /* right */
    25% {
        clip-path: inset(0 126px 0 0);
    }

    /* bottom */
    50% {
        clip-path: inset(34px 0 0 0);
    }

    /* left */
    75% {
        clip-path: inset(0 0 0 126px);
    }
}

[] 扫光按钮

.适合正方形

.检查元素，取消溢出隐藏，体会其原理

<div class="border">
  <div style="--deg:0"></div>
  <div style="--deg:1"></div>
  <div style="--deg:2"></div>
  <div style="--deg:3"></div>
</div>

.border {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 100px auto;
}

.border::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #890;
  box-shadow: 0 0 0 8px #8903, 0 0 0 16px #8901;
  border-radius: 50%;
  animation: move 4s linear infinite;
}

@keyframes move {
  25% {
    transform: translate(174px, -2px);
  }

  50% {
    transform: translate(174px, 174px);
  }

  75% {
    transform: translate(-2px, 174px);
  }

  0%,
  100% {
    transform: translate(-2px, -2px);
  }
}

.border div {
  position: absolute;
  inset: 0px;
  background-color: rgba(0, 0, 0, 0.01);
  transform: rotate(calc(90deg*var(--deg)));
  overflow: hidden;
}

.border div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #890;
  transform: translateX(-100%);
  animation: slide 4s linear infinite;
  animation-delay: calc(var(--deg)*1s);
  z-index: 1;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }

  50%,
  100% {
    transform: translateX(100%);
  }
}