[分享]css中怎么做剪切蒙版的效果

剪切蒙版是一种常见的CSS效果，可以让图片或其他元素只显示出上层图层所覆盖的部分。下面介绍几种实现剪切蒙版的CSS方法。/ 使用clippath属性 / .mask { webkitclippath:...

剪切蒙版是一种常见的CSS效果，可以让图片或其他元素只显示出上层图层所覆盖的部分。下面介绍几种实现剪切蒙版的CSS方法。

/* 使用clip-path属性 */

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

/* 使用mask属性 */

.mask {
  -webkit-mask-image: url(mask.png);
  mask-image: url(mask.png);
}

/* 使用伪元素 */

.mask {
  position:relative;
}

.mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: #fff;
}

.mask::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background-color: #fff;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
} 

上述代码中，clip-path属性是CSS3新增的属性，可用于剪切元素。将多边形坐标传递给clip-path属性，即可实现剪切蒙版的效果。另外，mask属性也可用于实现剪切蒙版。mask属性值为一张图片，图片亮度为0的地方会显示下层元素，亮度为1的地方会剪切上层元素。

除了clip-path和mask属性外，我们还可以使用伪元素的方式实现剪切蒙版。这种方式需要先将包含图片的元素设置为定位元素（position: relative），然后使用两个伪元素分别覆盖图片的左半部分和右半部分，将右半部分的clip-path属性设置为多边形坐标即可。