带形状css的叠加图像

Question

如何掩盖具有css形状的图像？

参考图像

我已经作出与CSS边框风格，但不能覆盖的图像的形状。

CSS

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

Answer 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，火狐，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 ：https://css-tricks.com/clipping-masking-css/

• 工具以这种方式产生的形状：http://bennettfeely.com/clippy/

Answer 2

对于您可以使用gradients。下面是一个例子代码：

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

<div></div>

Working fiddle