遍布浏览器宽度的CSS三角形

Question

想象一下,我们有一个三角形:

article {
  position: relative;
}

article>.triangle {
  position: absolute;
  left: 0;
  top: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid red;
}

<article>
  <div class="triangle"></div>
</article>

是否可以更改css以实现许多三角形,这些三角形都在浏览器的宽度范围内？

Answer 1

你可以像这样做,并选择你想要三角形的颜色:

编辑:由于Temani Afi的评论缩短了.

.triangle {
  height: 30px;
  background-image: 
   linear-gradient(-45deg, transparent 75%, #FF0000 0), 
   linear-gradient(45deg, transparent 75%, #FF0000 0);
  background-size: 40px 40px;
  background-position: 20px 0;
}

<article>
  <div class="triangle"></div>
</article>