使div的顶部和底部边框具有锯齿状边缘 [英] Make a divs top and bottom border have a jagged edge

问题描述

在div上创建边框的最佳方法是什么？它只需要在现代浏览器工作，没有IE10以下。我一直在研究使用边框图像，但似乎有点偏离，它将如何渲染底部边框，以及它如何延伸跨越的宽度。使用重复的背景图像我不认为会工作，因为容器的高度可以增长。感谢任何帮助！

解决方案<

> 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-线性梯度（45deg，＃272220 33.33％，＃2B3A48 33.33％）0 0％; 
背景：-o-线性梯度（＃2B3A48 0％，透明0％）， - 非线性梯度（135deg，＃272220 33.33％，透明33.33％）0 0％，＃272220-线性梯度（45deg，＃272220 33.33％，＃2B3A48 33.33％）0 0％; 
背景：-moz-线性梯度（＃2B3A48 0％，透明0％），-moz-线性梯度（135deg，＃272220 33.33％，透明33.33％）0 0％，＃272220-线性梯度（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-线性梯度（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 * / 
} 
  

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!

解决方案

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

这篇关于使div的顶部和底部边框具有锯齿状边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！