0

我曾尝试创建多个容器，然后将它们从 360 旋转到 270，以使它们在页面上四处走动，但没有奏效。

CSS：


.zigzag-section:after{
  content:'';
  position:absolute;
  width:100%;
  height:40px;
  top:100vh;
  display:block;
  background:linear-gradient(-45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  ), linear-gradient(45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  );
  background-size: 30px 90px;
  transform:rotate(360deg);
}

.zigag-section:after{
  content:'';
  position:absolute;
  width:100%;
  height:40px;
  top:100vh;
  display:block;
  background:linear-gradient(-45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  ), linear-gradient(45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  );
  background-size: 30px 90px;
  transform:rotate(360deg);

.content{
  width:45%;
  height:20vh;
  
  position:relative;
 
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}

HTML：

<div class = "zigag-section">
     </div>
  <div class = "zigzag-section">
  </div>

我只创建了 2 个之字形部分，因为第二个（之字形）不会完全向左移动，并且当我扩展宽度时，调整大小时该部分不会随浏览器移动。

4

1 回答 1

0

好吧，如果你想把它当作背景，你需要把你的内容放在 div 里面，这个 div 会有锯齿形。或者，在本例中，背景：

<div class="zigzag">
  <div class="content-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id diam libero. Morbi et libero dapibus, consectetur massa vitae, faucibus dolor. Suspendisse sollicitudin hendrerit convallis. Pellentesque eu arcu pellentesque, aliquam massa non, lacinia libero. Vivamus vestibulum neque varius imperdiet consequat. Sed viverra est non tellus efficitur, aliquam fermentum elit tristique. Duis sit amet orci placerat, ornare libero sed, commodo eros. Fusce vitae iaculis massa.</div>
</div>

这样您就可以在 zig-zag 类上设置所需的背景：

.content-container { 
  background: rgba(255,255,255, .7);
  padding: 10px;
}

.zigzag {
  padding: 40px 100px;
  background:
  linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
  linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
  background-color:#708090;
  background-size: 64px 128px;
}

希望这是您正在寻找的解决方案。贝娄是片段

.content-container { 
  background: rgba(255,255,255, .7);
  padding: 10px;
}

.zigzag {
  padding: 40px 100px;
  background:
linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px;
}
<div class="zigzag">
  <div class="content-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id diam libero. Morbi et libero dapibus, consectetur massa vitae, faucibus dolor. Suspendisse sollicitudin hendrerit convallis. Pellentesque eu arcu pellentesque, aliquam massa non, lacinia libero. Vivamus vestibulum neque varius imperdiet consequat. Sed viverra est non tellus efficitur, aliquam fermentum elit tristique. Duis sit amet orci placerat, ornare libero sed, commodo eros. Fusce vitae iaculis massa.</div>
</div>

于 2020-11-29T21:37:48.417 回答