Gaz Smith Gaz Smith - 10 days ago 6
CSS Question

HTML Polygon flip it around the other way

Hi i have a HTML polygon, this is my 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>


This produces :
enter image description here

I actually want this the other way around, so that the black section is blue and the blue section is transparent. I cant find a way at all to edit the color of the black section i have even tried changing the bodys bg-color.

Here is my 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;

}


Can anyone help? Thanks.

Answer

Add fill property to polygon and change the background of svg to transparent.

Have a look at the snippet below (use full screen for better view, ignore placeholder image of arrow):

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

Hope this helps!