1

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

在此处输入图像描述

有没有办法在 CSS 中实现这一点（也许有转换）而不必求助于 SVG ？

谢谢

4

4 回答 4

2

试试这个 - 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;
}
​
于 2012-07-28T11:39:07.090 回答
0

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

于 2012-07-28T11:25:09.297 回答
0

或者这个：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);
}​
于 2012-07-28T11:39:52.470 回答
0

只是另一种方式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;
 }
​
于 2012-07-28T12:00:54.797 回答