使用蒙版创建不规则形状的图像

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

在上面的例子中，三个 linear-gradient 图像（当放置在它们的适当位置时将覆盖容器尺寸的 100％×100％）被用作掩模，以在图像的底部产生透明的三角形切口。

没有面具的图像：

带面具的图像：