带有边缘和边框的页脚 div答案

【问题标题】：Footer div with slated edge and border带有边缘和边框的页脚 div
【发布时间】：2012-07-28 20:00:54
【问题描述】：

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

有没有什么方法可以在 CSS 中实现这一点（可能需要转换），而不必求助于 SVG？

谢谢

【问题讨论】：

我会坚持使用单个背景图像（只需使其非常宽，例如 2000 像素宽）。作为 PNG，它不会超过几个 KB。

标签： html css css-transforms

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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;
 }

【讨论】：