HTML 多边形以另一种方式翻转它

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>

这会产生:

我实际上想要反过来，这样黑色部分是蓝色的，蓝色部分是透明的。我根本找不到编辑黑色部分颜色的方法，我什至尝试过更改主体的背景色。

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

为polygon添加fill属性，将svg的background改为透明

看看下面的代码片段(使用全屏以获得更好的 View ，忽略箭头的占位符图像):

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

希望这对您有所帮助!