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

Answer 1

您也可以将实心红色三角形作为渐变。如果使用关键字指定角度，这将是响应。最重要的是，黑色/透明渐变

＆＃13;

#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%);
  }

＆＃13;

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

＆＃13;

响应宽度css三角形与渐变

1 个答案: