如何用颜色填充透明六边形PNG？ [CSS]

Question

我有一个六边形的 PNG，我想在其中填充红色，包括 png 的边框。

在 CSS 中有什么方法可以做到这一点吗？

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

这是 PNG：

Answer 1

这是用 CSS 制作六边形的方法，我已经添加了你的图片，但你也可以删除它，只使用六边形 CSS 代替。

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

如何用颜色填充透明六边形PNG？ [CSS]

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

html

css

png