How to Add Zig Zag Border to a Box Contains Background Image

How To Add Zig Zag Border to a Box contains background image

You can do that, but you need masking, and as far as I know it is only available in webkit.

#zigzag {    width: 600px;    height: 400px;    -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px);    -webkit-mask-position: left bottom;    -webkit-mask-repeat: repeat-x;    -webkit-mask-size: 100% 100%, 30px 30px, 30px 30px;    background: url("http://placekitten.com/1000/750");    background-size: cover;}
body {    background-image:  repeating-linear-gradient(20deg, lightgreen, lavender 40px);   }

<div id="zigzag"></div>

Linear gradient zig zag background image

I actually forgot about this question but I resolved it quite a while back and created a demo of it on Codepen here: http://codepen.io/dcdev/pen/noAiw

css

body { 
  background-color:transparent;
}
div { 
  margin:0 auto;
  width:940px;
  height:300px;
}
div.top { 
  background-image:url(http://www.placehold.it/940x300/2D8ABE);
}
div.bottom { 
  background-image:url(http://www.placehold.it/940x300/A93459); 
}
#zz {
  max-width:940px;
  margin-top:-125px;
  height:15px;
  background:-webkit-linear-gradient(0deg,transparent 15px,#fff 15px),-webkit-linear-gradient(-135deg,#fff 10px,transparent 10px),-webkit-linear-gradient(135deg,#fff 10px,transparent 10px);background:-moz-linear-gradient(0deg,transparent 15px,#fff 15px),-moz-linear-gradient(-135deg,#fff 10px,transparent 10px),-moz-linear-gradient(135deg,#fff 10px,transparent 10px);background:-o-linear-gradient(0deg,transparent 15px,#fff 15px),-o-linear-gradient(-135deg,#fff 10px,transparent 10px),-o-linear-gradient(135deg,#fff 10px,transparent 10px);background:-ms-linear-gradient(0deg,transparent 15px,#fff 15px),-ms-linear-gradient(-135deg,#fff 10px,transparent 10px),-ms-linear-gradient(135deg,#fff 10px,transparent 10px);background:linear-gradient(0deg,transparent 15px,#fff 15px),linear-gradient(-135deg,#fff 10px,transparent 10px),linear-gradient(135deg,#fff 10px,transparent 10px);background-color:transparent;background-position:center center;background-repeat:repeat-x;-webkit-background-size:100% 100%,15px 15px,15px 15px;-moz-background-size:100% 100%,15px 15px,15px 15px;background-size:100% 100%,15px 15px,15px 15px;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);
}

html

<div class="top"></div>
<div id="zz" role="separator"></div>
<div class="bottom"></div>

How to make CSS zig-zag borders?

Here is solution. It's called zig-zag border.

http://jsfiddle.net/justinmc/QqnD3/

<div class="container">
    <h1>Content Here</h1>
</div>

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

credits
https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/

Zig zag border on a button which also has an inner dotted border

You would just have to change the gradient's angles, its size, position and repeat settings like in below snippet. The changes are self explanatory and so I am not detailing them much (leave me a comment if you need more explanation).

The other change that I've done is to remove the outline and move the dotted border to a pseudo. I have done this because masks work only till the border of the element and not the outline, so when the mask is applied, the outline will also get masked out.

(The below snippet uses masks and so will not work in non-Webkit browsers, the second one would).

button {  position: relative;  height: 45px;  margin-top: 15px;  background-color: #99c94d;  border: none;  color: #475b28;  font-size: 14px;  font-weight: 700;    /* add the following */  padding: 8px;  -webkit-mask-image: linear-gradient(white, white), linear-gradient(-225deg, white 5px, transparent 5px), linear-gradient(45deg, white 5px, transparent 5px);  -webkit-mask-position: left top, right top, right top;  -webkit-mask-repeat: repeat-y;  -webkit-mask-size: calc(100% - 10px) 100%, 10px 15px, 10px 15px;}button:after {  position: absolute;  content: '';  height: calc(100% - 8px); /* 100% - top padding */  width: calc(100% - 12px); /* 100% - right padding - buffer */  top: 4px;  /* half of top padding */  left: 4px; /* half of left padding */  border-style: dotted;  border-width: 2px;  border-color: #5b7731 transparent #5b7731 #5b7731;    box-sizing: border-box;}.tall {  height: 90px;}

<button type="submit">Lorem ipsum dolor sit amet.</button><button type="submit" class="wide">Lorem ipsum dolor sit amet. Some more text</button><button type="submit" class="tall">Lorem ipsum dolor sit amet.</button>

How can I move this zigzag border to the left side instead of the bottom?

You should be able to change the linear-gradient degrees to achieve this, and set background-repeat to repeat-y.

  .zigzag {    height: 150px;    width: 400px;    background: linear-gradient(-137deg, #e8117f 6px, transparent 0) 0 5px, linear-gradient(320deg, #e8117f 5px, #fff 0) 0 5px;    background-color: #e8117f;    background-position: left bottom;    background-repeat: repeat-y;    background-size: 10px 10px; }

<div class="zigzag"></div>

Zig zag border for a circle?

I would consider using SVG with some rotation and use them as backgrounds.

Here is an attempt that can give you an idea about how it can be done. Basically, the SVG is the same and we simply repeat and rotate until we get the full shape. The main trick is to find the correct values:

Here is the final code:

.zigzag {   width:256px;   height:256px;   background:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(16.36deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(32.73deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(49.09deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(65.45deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(81.81deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(98.18deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(114.54deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(130.90deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(147.27deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(164.2deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>");    background-size:100% 100%;        font-size:28px;    line-height:256px;    color:#fff;    text-align:center;}
body { background:pink;}

<div class="zigzag">zig zag circle</div>

---

Related Topics