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

【问题标题】：Footer consisting of two right triangles页脚由两个直角三角形组成
【发布时间】：2019-01-15 20:35:17
【问题描述】：

我正在制作一个网站，我希望页脚看起来像这样：https://imgur.com/a/JuHHHkM

它基本上是两个相互重叠的三角形。我试着做这样的三角形：

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

但是因为宽度取决于你在右边框中放了多少像素，所以我不能使用 width: 100%。

还有其他选择吗？提前致谢

【问题讨论】：

标签： css footer

【解决方案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>

【讨论】：