html - 整个浏览器宽度的 CSS 三 Angular 形

Question

假设我们有一个三 Angular 形:

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 来实现许多三 Angular 形，这些三 Angular 形都横跨浏览器的宽度？

Answer 1

你可以这样做，然后选择你想要的三 Angular 形颜色:

编辑:由于 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>