Html 如何在CSS中创建形状模式？

我想知道如何使用css创建由重复形状组成的模式。我想创建的图案是下面照片中页面顶部的一行交替三角形

我已经成功地创建了下面的一个三角形。我只是没有弄清楚如何创建无限量的副本

.triangle{
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：50px纯红；
}

---

好的做法是使用SVG，甚至是重复的背景图像。如果你想只使用css，那么试试这个

CSS代码

.body{
  width:1000px;
  margin:0 auto;
}

.arrow{
  display:inline-block;
}

.-up {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

.-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid orange;
}

<div class="body">
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
</div>

HTML代码

.body{
  width:1000px;
  margin:0 auto;
}

.arrow{
  display:inline-block;
}

.-up {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

.-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid orange;
}

<div class="body">
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
  <div class="arrow -up"></div>
  <div class="arrow -down"></div>
</div>

---

但是不推荐，而且非常难看：）

如果你尝试这样做，一个好的做法就是。别误会，我们喜欢帮助别人。但是测试你的好奇心并找到解决问题的方法是非常重要的。当你有股票时，你的问题肯定会得到回答。请参阅页面以获得澄清此问题的帮助。如果不需要用户与三角形交互，我可能会使用SVG甚至重复的背景图像。我不需要用户交互。这只是外表的问题。