html - jagged edges with transparant background in CSS -

html - jagged edges with transparant background in CSS -

make divs top , bottom border have jagged edge

based on reply of @ᴀʀᴜn bᴇrtil able create something.

the problem doensn't good, can't rid of background color. using no shadow option, using static single-color background not. how create transparent?

or there way? know css3 can utilize images in border, prefer css-code without images.

there several ways accomplish (including js , svg solutions). think easiest solution using pure css using pseudo-elements (to render jagged edges) in combination linear-gradient , multi-backgrounds feature. here 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%, grayness 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%, grayness 34%, transparent 44%), linear-gradient(45deg, transparent 66%, white 67%); } body { background:url(http://placekitten.com/800/600); } demo.

html css css3