HTML Polygon将其翻转为另一种方式

Question

您好我有一个HTML多边形，这是我的代码：

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

这会产生：

我实际上想要这个，所以黑色部分是蓝色，蓝色部分是透明的。我无法找到一种方法来编辑黑色部分的颜色，我甚至尝试过改变bodys bg-color。

这是我的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;

}

有人可以帮忙吗？感谢。

Answer 1

将fill属性添加到polygon，并将background的{​​{1}}更改为透明。

查看下面的代码段（使用全屏查看更好的视图，忽略箭头的占位符图片）：

＆＃13;

＆＃13;

svg

＆＃13;

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

}

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

将多边形填充设置为蓝色，并在css中将svg背景设置为黑色：

svg{
  background: black;
}

和你的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>