以上效果完全是通过CSS3的linear-gradient实现的
以下是相关的的css代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.bg{ width:300px; height:50px; background:#caca8c; background-image:-webkit-gradient(linear,50% 0,0 100%, from(transparent), color-stop(.5,transparent), color-stop(.5,#d86707), to(#d86707) ), -webkit-gradient(linear,50% 0,100% 100%, from(transparent), color-stop(.5,transparent), color-stop(.5,#d86707), to(#d86707) ); background-image:-moz-linear-gradient(50% 0 -45deg, transparent, transparent 50%, #d86707 50%, #d86707 ),-moz-linear-gradient(50% 0 -135deg, transparent, transparent 50%, #d86707 50%, #d86707 ); background-size:30px 15px; background-repeat:repeat-x; background-position:0 100%; } |
jsfiddle.net在线查看编辑效果
http://jsfiddle.net/huanmie913/dyjQc/css3background/
PS:请使用火狐(FF)或者google(chrom)浏览器查看效果