html - 具有渐变的响应式宽度 css 三 Angular 形

Question

我正在尝试构建一个三 Angular 形，其渐变宽度为父级宽度的 100%。父元素将位于一行三列中，并且是响应式的。 我通过制作一个纯色三 Angular 形并在其顶部放置一个透明渐变来完成渐变部分。问题是使用这种方法我需要为三 Angular 形的宽度输入一个特定的数字。 这是我用于三 Angular 形的方法

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

我一直没能找到让三 Angular 形成为父容器 100% 宽度的方法。

最终目标是三 Angular 形具有不同的高度，具体取决于正在查看的产品，但始终为父容器的 100% 宽度。这是到目前为止我的设置的示例。

http://codepen.io/anon/pen/vOpQYo

Answer 1

您也可以将实心红色三 Angular 形作为渐变。如果 Angular 是用关键字指定的，这将是响应式的。在它上面，黑色/透明渐变

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