Question

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

我设法创建了以下三角形之一。我只是无法弄清楚如何创建无限数量的重复项。

ScheduleReboot

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

Answer 1

一个好的做法是使用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;
}

HTML代码

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

但不建议这样做，而且非常难看:)

如何在CSS中创建形状图案？

1 个答案: