Make a divs top and bottom border have a jagged edge

Question

What would be the best approach to make a border such as this on a div? It would only need to work in modern browsers and nothing below IE10. I have been looking into using border image but that seems to be a little off in how it would render the bottom border and in how it stretches across the width of the div. Using a repeated background image I dont think would work either since the height of the container can grow. Thanks for any help! enter image description here

Check this css3 feature out: http://caniuse.com/#feat=multibackgrounds — ravenlp, Sep 24 '13 at 04:20
Have you looked into possible dups.... http://stackoverflow.com/questions/12031328/css-zigzag-border-with-a-textured-background — justderb, Sep 24 '13 at 04:21
Yes I have tried altering the examples seen from the other questions asked about zig zag borders but they all seem to focus on only a bottom border. I have had no success in getting it to work on both the top and bottom borders. — Stavros_S, Sep 24 '13 at 04:30
Found this code on the web http://codepen.io/joeyhoer/pen/EraAu — Itay, Sep 24 '13 at 04:36

Arun Bertil · Accepted Answer · 2013-09-24T05:08:51.837

Check this jsfiddle which works in all browsers

EDIT

http://jsfiddle.net/yKPe9/3/

.header:after, .footer:after {
    content: " ";
    display:block;
    position: relative;
    top:0px;
    left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
        background: -ms-linear-gradient(#2B3A48 0%, transparent 0%), -ms-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -ms-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

.main
{
    height:200px;
    padding: 36px 0;
    box-sizing:border-box;
   background-color:#2B3A48; 
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
}

@Stavros_S it should work I think. Include also `-ms` vendor prefix. — Mr_Green, Sep 24 '13 at 04:51
Arun, did you write this code or there is any gradient maker? If it is a gradient maker then please give me the link :). — Mr_Green, Sep 24 '13 at 05:00
@ArunBertil I will check it out in the morning and mark as the answer if it works. — Stavros_S, Sep 24 '13 at 06:42

Make a divs top and bottom border have a jagged edge

1 Answers1

Linked