具有形状css的覆盖图像[重复]答案

【问题标题】：overlay image with shape css [duplicate]具有形状css的覆盖图像[重复]
【发布时间】：2016-11-02 04:43:42
【问题描述】：

如何使用 css 形状屏蔽图像？

参考图片

我已经制作了一个带有 css 边框样式的形状，但无法覆盖图像。

CSS

#triangle-topleft {
  width: 0;
  height: 0; 
  border-top: 100px solid red;
  border-right: 100px solid transparent; 
}

【问题讨论】：

标签： html css web

【解决方案1】：

选项 1 - SVG

<svg width="100" height="100">
  <defs>
    <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://lorempixel.com/300/300" x="0" y="0" width="100" height="100" />
    </pattern>
  </defs>
  <polygon points="0,0 100,0 50,100" fill="url(#a)" />
</svg>

在 Chrome、Firefox、IE9+ 上测试

选项 2 - clip-path

.element {
  display:inline-block;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<div class="element">
  <img src="https://s3.amazonaws.com/uifaces/faces/twitter/ok/128.jpg" />
</div>

can i use
关于clip-path的Grate教程：https://css-tricks.com/clipping-masking-css/
以这种方式生成形状的工具：http://bennettfeely.com/clippy/

【讨论】：

谢谢，但是 mozilla 不支持剪辑路径
正如我在回答中提到的......这就是我添加 SVG 解决方案的原因......
是的。谢谢。 SVG 作品

【解决方案2】：

为此，您可以使用gradients。这是一个示例代码：

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom left, white 50%, transparent 0),        
    url('http://lorempixel.com/100/100');
}

&lt;div&gt;&lt;/div&gt;

Working fiddle

【讨论】：