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