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.

@Dominik, I am attempting to make the background look as if it is looking at the content, like how the zig-zag header is positioned to 'look' down, and the other zigag header is positioned to 'look to the right, basically, I know the way to create multiple zig zags to make them go around the screen, but i need to know how to stick them to the right, or left, or bottom — Programming Things, Nov 29 '20 at 21:34

score 0 · Answer 1 · answered Nov 29 '20 at 21:37

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>

Sadly, this doesnt work, I mean like a background to surround the content but not cover the background of the content, if this makes sense? — Programming Things, Nov 29 '20 at 21:40
Yes, exactly! Like a border that sticks to the sides of the screen — Programming Things, Nov 29 '20 at 21:44

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

1 Answers1