HTML Polygon Flip es um die andere Art und Weise

Question

Hallo ich ein HTML-Polygon haben, ist dies mein Code:

<div class="full-background"> 
     <div class="diag"> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
    <polygon points="100 0 100 10 0 10" /> 
    </svg> 
    <img src="assets/img/downarrow.png" alt="" /> 
</div> 
    </div> 

Dies erzeugt:

ich das eigentlich anders herum wollen, so dass Der schwarze Bereich ist blau und der blaue Bereich ist transparent. Ich kann überhaupt keinen Weg finden, um die Farbe des schwarzen Abschnitts zu bearbeiten, ich habe sogar versucht, die Körper bg-Farbe zu ändern.

Hier ist meine CSS:

.diag { 
    position: absolute; 
    bottom:0; 
    width:100%; 
} 
svg { 
    display: block; 
    width: 100%; 
    height: 20vh; 
    background: #38aae1; 

} 

img { 
    height: 50px; 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    margin: auto; 
    background: #ef7d00; 
    border-radius: 50%; 
    padding: 10px; 

} 

Kann jemand helfen? Vielen Dank.

Answer 1

hinzufügen fill Eigenschaft polygon und die background von ändern svg zu transparent.

Werfen Sie einen Blick auf das Snippet unten (Verwendung Vollbild für eine bessere Ansicht, Platzhalter Bild des Pfeiles ignorieren):

.diag { 
 
    position: absolute; 
 
    bottom:0; 
 
    width:100%; 
 
} 
 
svg { 
 
    display: block; 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: transparent; 
 
} 
 

 
svg polygon { 
 
    fill: #38aae1; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    margin: auto; 
 
    background: #ef7d00; 
 
    border-radius: 50%; 
 
    padding: 10px; 
 

 
}

<div class="full-background"> 
 
     <div class="diag"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
 
    <polygon points="100 0 100 10 0 10" /> 
 
    </svg> 
 
    <img src="http://placehold.it/10x10" alt="" /> 
 
</div> 
 
    </div>

hoffe, das hilft!

Answer 2

das Polygon auf die blaue Farbe füllen einstellen und svg Hintergrund auf Schwarz in CSS gesetzt:

svg{ 
    background: black; 
} 

und Ihr svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
    <polygon points="100 0 100 10 0 10" fill="#38aae1"/> 
</svg>