三角锯齿背景

<html>

    <head>

        <style type="text/css">
            .bg {
                width: 100%;
                height: 20px;;
                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%;
            }
        </style>
    </head>

    <body>
        <div class="bg"></div>
    </body>

</html>

posted on 2014-11-12 16:12 一条大鱼阅读(149) 评论(0) 编辑收藏举报