路径裁剪

@Clip-path

说明

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

. 阴影、边框等会被切掉

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

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

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

属性

. clip-source = url

. basic-shape = inset | circle | ellipse | polygon

. geometry-box = shape-box | fill-box | stroke-box | view-box

矩形 inset 裁剪

. 5个参数：上右下左和圆角大小

.cp-img0 {
    clip-path: inset(20px round 10px);
}

圆形 circle 裁剪

. 2个参数：圆的半径；圆的位置，默认是图像中心

.cp-img10 {
    clip-path: circle(50%);
}

.cp-img10 {
    clip-path: circle(50% at 0 50%);
}

[] 定制单选/多选按钮

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 裁剪

. 3个参数：椭圆的x轴、椭圆的y轴和椭圆中心，默认是图形中心

.cp-img20 {
    clip-path: ellipse(50% 50%);
}

.cp-img21 {
    clip-path: ellipse(50% 50% at 0 50%);
}

多边形 polygon 裁剪

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

1. 菱形

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

2. 三角形

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

.cp-img4 {
    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%);
}

案例 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%);
  }
}