页脚div与边缘和边框

Question

我正在构建一个页脚顶部和边框：

有没有办法在CSS中实现这一点（或许可以使用转换）而不必使用SVG？

谢谢

Answer 1

试试这个 - http://jsfiddle.net/QBxhd/

body {
    overflow-x: hidden;
}

footer {
    height: 100px;
    position: relative;
    background: #000;
    margin-top: 200px;
}

footer:before, footer:after {
    content: '';
    display: block;
    position: absolute;
    height: 40px;
    width: 102%;
    background: #ccc;
    top: -30px;

    -webkit-transform: rotate(-3deg); 
       -moz-transform: rotate(-3deg); 
        -ms-transform: rotate(-3deg); 
         -o-transform: rotate(-3deg); 
            transform: rotate(-3deg); 
                 zoom: 1;
}

footer:after {
    background: #000;
    top: -23px;

    -webkit-transform: rotate(-2deg); 
       -moz-transform: rotate(-3deg); 
        -ms-transform: rotate(-3deg); 
         -o-transform: rotate(-3deg); 
            transform: rotate(-2deg); 
                 zoom: 1;
}
​

Answer 2

我认为使用两个div相互叠加，灰色和黑色作为颜色可以做到这一点。将它们转移到想要的位置，然后用z-index对它们进行排序。

Answer 3

或者：http://jsfiddle.net/faceleg/tQtZY/

<div class="grey"></div>
<div class="black"></div>​

.grey, .black {
    width: 100%;
height: 100px;   
    position: absolute;  
    margin-bottom: -20px; 

    bottom: 0px;    
}
.grey {
    background-color: gray;   
    z-index: 10;
    -moz-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(-2deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.black {
    background-color: black;   
    z-index: 11;
    -moz-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(-1deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}​

Answer 4

另一种方式http://jsfiddle.net/uttara/XrVzx/3/

<div id="footer"></div>


#footer{
    width:500px;
    height:100px;
    margin:50px auto;
    background-color:black;   
}


#footer:after{
    border-bottom: 30px solid black;
    border-left: 500px solid transparent;
    height: 0;
    width: 0;
    top:20px;
    content:"";
    position:absolute;
 }

#footer:before{
    border-bottom: 40px solid grey;
    border-left: 500px solid transparent;
    height: 0;
    width: 0;
    top:10px;
    content:"";
    position:absolute;
 }
​