我有一个像Photoshop这样的边缘的形状:
是否可以使重复的三角形作为CSS的边框?
解决方法
您可以使用css3渐变来创建一个曲折图案的背景,使用后css伪应用它像一个边框。
HTML:
<div class="header"><h1>This is a header</h1></div>
CSS:
.header{ color:white; background-color:#2B3A48; text-align:center; } .header: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,#2B3A48 33.33%) 0 0%; background: -webkit-linear-gradient(#2B3A48 0%,-webkit-linear-gradient(135deg,#272220 -webkit-linear-gradient(45deg,#2B3A48 33.33%) 0 0%; background: -o-linear-gradient(#2B3A48 0%,-o-linear-gradient(135deg,#272220 -o-linear-gradient(45deg,#2B3A48 33.33%) 0 0%; background: -moz-linear-gradient(#2B3A48 0%,-moz-linear-gradient(135deg,#272220 -moz-linear-gradient(45deg,#2B3A48 33.33%) 0 0%; background-repeat: repeat-x; background-size: 0px 100%,9px 27px,9px 27px; }
资料来源:CSS Zigzag Border with a Textured Background
JSFiddle:http://jsfiddle.net/kA4zK/