How to fill transparent hexagonal PNG with color? [CSS]

Question

I have a hexagonal PNG and I want to fill red color in it including the borders of the png.

Is there any way to do that in CSS?

FiddleLink: https://jsfiddle.net/t6L5h2xk/5/

<div>
  <img
       alt="axc"
       class='hexagon'
       src="https://i.stack.imgur.com/GgWmf.png"
       />
</div>

Here's the PNG:

do you have to use png? we can make hexagon using html css. – rootShiv Mar 31 '22 at 08:53 — rootShiv, Mar 31 '22 at 08:53
why not building the shape with CSS? – Temani Afif Mar 31 '22 at 08:53 — Temani Afif, Mar 31 '22 at 08:53

score 1 · Accepted Answer · answered Mar 31 '22 at 09:09

Here is how to make hexagons with CSS, I've added your image, but you can also remove it and just use hexagonal CSS instead.

.hex {
    margin-top: 34.5px;
    margin-left:4px;
    width: 104px;
    height: 60px;
    background-color: #27aae1;
    border-color: #27aae1;
    position: relative;
    display: inline-block;
}
.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid;
    border-color: inherit;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}
.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid;
    border-color: inherit;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hexagon{
  position: absolute;
  width: 112px;
}

<div>
  <img
       alt="axc"
       class='hexagon'
       src="https://i.stack.imgur.com/GgWmf.png"
       />
</div>
<span class="hex"></span>

How to fill transparent hexagonal PNG with color? [CSS]

1 Answers1