使divs的顶部和底部边框有一个锯齿状边缘

Question

在div上制作边框的最佳方法是什么？它只需要在现代浏览器中工作，没有低于IE10。我一直在研究使用边界图像，但这似乎有点关于如何渲染底部边框以及它如何在div的宽度上延伸。使用重复的背景图片我不认为会工作，因为容器的高度可以增长。谢谢你的帮助！

Answer 1

入住这其中的jsfiddle在所有的浏览器

编辑

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*/ 
}