Polygone mit Bildern

Question

Ich versuche, einige Formen zusammen mit CSS zu tun.

Wie kann ich diese Formen mit den Bildern innerhalb machen? Hier

Answer 1

ist ein Ansatz mit:

• inline svg
• die pattern element
• die polygon element

svg { 
 
    display: block; 
 
    background: lightgrey; 
 
}

<svg viewbox="0 0 10 6.1"> 
 
    <defs> 
 
    <pattern id="img" patternUnits="userSpaceOnUse" width="6" height="4"> 
 
     <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="6" height="4" /> 
 
    </pattern> 
 
    </defs> 
 
    <g fill="url(#img)" stroke-width="0.1" stroke="lightgrey"> 
 
    <polygon points="0.3 0.3 5.5 0.3 3.4 3.1 0.3 3.1" /> 
 
    <polygon points="0.3 3.3 5.6 3.3 7.5 5.8 0.3 5.8" /> 
 
    <polygon points="5.7 0.3 4.65 1.75 7.7 5.8 9.7 5.8 9.7 0.3" /> 
 
    <polygon points="4.52 1.85 5.5 3.15 3.6 3.15" /> 
 
    </g> 
 
</svg>