如何在一个页面上呈现两次条纹元素

.container1 {
  background-image: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%);
}

.container2 {
  background-image: linear-gradient(135deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%);
}

<div class="container1"></div>
<div class="container2"></div>

.container {
  position: relative;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
}

.container::before {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%);
}

.container::after {
  background-color: #000000;
  background-image: linear-gradient(135deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%);
}

<div class="container">
  <!-- 在这里插入内容 -->
</div>