オーバーレイ画像（形CSS）

Question

CSS画像で画像をマスクするにはどうすればよいですか？

参照画像

は、私はすでにCSSの境界線スタイルが、画像をオーバーレイすることはできないとの形状をしました。

CSS

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

Answer 1

オプション1 - クロム、Firefoxの、IE9 +

01でテスト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>

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から

  ---

  オプション2 ：https://css-tricks.com/clipping-masking-css/

• このように形状を生成するためのツール：そのためにhttp://bennettfeely.com/clippy/

Answer 2

あなたがgradientsを使用することができます。ここではサンプルコードです：私はSVGを追加した理由

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