Is there a way to create a background with a zig-zag effect on the top, left, bottom, and right side of a body?

Question

I have tried creating multiple containers, then rotating them from 360 to 270, to make them go around the page, but it has not worked.

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>

I only created 2 zigzag-sections because the second one (zigag) wouldn't go to the left fully, and when I extended the width, the section wouldn't move with the browser when resizing.

Answer 1

Well, if you are trying to put it like a background, you need to put your content inside the div that will have the zigzag. Or, in the case of this example, the background:

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

So that you can set on the zig-zag class the background desired:

.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;
}

Hope this is the solution that you're looking for. Bellow is the snippet

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