Overlay-Bild mit Form css

Question

Wie kann ich ein Bild mit einer CSS-Form maskieren?

Referenzbild

Ich habe bereits eine Form mit Stil CSS-Grenze, aber nicht in der Lage, ein Bild zu überlagern.

CSS

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

Answer 1

Option 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>

Getestet auf Chrome, Firefox, Internet Explorer 9 +

---

Option 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

• Grate Tutorial über clip-path : https://css-tricks.com/clipping-masking-css/

• Tool zur Erzeugung Formen auf diese Weise: http://bennettfeely.com/clippy/

Answer 2

Dafür Sie gradients verwenden können. Hier ist ein Beispiel-Code:

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