2

Make a divs top and bottom border have a jagged edge

Based on the answer of @ᴀʀᴜn BᴇrtiL I was able to create something.

The problem is it doensn't look good, I can't get rid of the background color. Using no shadow is an option, but using a static single-color background is not. So how do I make it transparent?

Or is there another way? I know CSS3 can use images in the border, but I prefer CSS-code without images.

Community
  • 1
  • 1
diedie2
  • 366
  • 1
  • 6
  • 17

1 Answers1

4

There are several ways to achieve this (including JS and SVG solutions). However I think the easiest solution using pure CSS is using some pseudo-elements (to render the jagged edges) in combination with linear-gradient and multi-backgrounds feature. Here is the demo code:

div {
  width:200px;
  height:250px;    
  background:white;
  position:relative;
  margin-top:25px;
}
div:before, div:after {
  content:'';
  width:100%;
  height:5px;
  position:absolute;
  bottom:100%;
  left:0;
  background-image: linear-gradient(135deg, transparent 66%, white 67%),
                    linear-gradient(45deg, white 33%, gray 34%, transparent 44%);
  background-position: -5px 0;
  background-size: 10px 100%;
  background-repeat:repeat-x;
}
div:after {
  top:100%;
  bottom:auto;
  background-image: linear-gradient(135deg, white 33%, gray 34%, transparent 44%),
                    linear-gradient(45deg, transparent 66%, white 67%);    
}
body {
  background:url(http://placekitten.com/800/600);
}

Demo.

King King
  • 61,710
  • 16
  • 105
  • 130
  • 1
    works like a charm! And also very easy to edit the width and heigth of the triangles (tip: play with height and background-size inside div:before, div:after {}) – diedie2 Jun 24 '14 at 13:50