响应式宽度的带渐变效果的CSS三角形

Question

我正在尝试构建一个三角形，其渐变颜色宽度为其父元素的100％。父元素将位于三列中的一列，并且将是响应式的。 我通过制作实色三角形并在其上放置透明渐变来完成渐变部分。问题是，使用这种方法需要为三角形指定特定的宽度。 以下是我用于三角形的方法：

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 300px;
border-color: transparent transparent red transparent;

我找不到一种方法使三角形的宽度与父容器的宽度保持100％一致。

最终目标是，三角形将具有变化的高度，具体取决于查看哪种产品，但始终应该是父容器的100％宽度。这是我目前设置的示例。 http://codepen.io/anon/pen/vOpQYo

- user2339729

---

http://jsfiddle.net/josedvq/3HG6d/ - aahhaa

有趣的三角形实现方式。但是我不太确定如何使其完全覆盖父容器并具有可变高度。似乎这些只能显示更多或更少的一个巨大的三角形。 - user2339729

Answer 1

你也可以将实心红色三角形作为渐变效果。如果使用关键字指定角度，则该效果将具有响应性。此外，还可以在其上添加黑色/透明渐变效果。

#test1 {
  width: 300px;
  height: 200px;
}
#test2 {
  width: 400px;
  height: 200px;
}
#test3 {
  width: 300px;
  height: 100px;
}
.test {
  display: inline-block;
  background-image: linear-gradient(90deg, black, transparent), linear-gradient(to top left, red 50%, black 50%);
  }

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>

- vals