Question

我正在建立一个网站，但我希望页脚如下所示：https://imgur.com/a/JuHHHkM

基本上是彼此重叠的两个三角形。我已经尝试过制作这样的三角形：

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

但是因为宽度取决于您在右边框中放置的像素数，所以我不能使用宽度：100％。

还有其他选择吗？在此先感谢

Answer 1

您可以轻松地通过渐变实现这一点：

.footer {
  height:100px;
  background:
   linear-gradient(to bottom right,transparent 49.5%,blue 50%),
   linear-gradient(to bottom left,transparent 49.5%,green 50%);
}

<div class="footer">
</div>

如果您不希望三角形为全角，也可以调整大小：

.footer {
  height:100px;
  background:
   linear-gradient(to bottom right,transparent 49.5%,blue 50%) right/80% 100% no-repeat,
   linear-gradient(to bottom left,transparent 49.5%,green 50%) left/80% 100% no-repeat;
}

<div class="footer">
</div>

由两个直角三角形组成的页脚

1 个答案: