使用蒙版建立不規則形狀的影象

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％）被用作掩模，以在影象的底部產生透明的三角形切口。

沒有面具的影象：

帶面具的影象：