html - スレートされたエッジと境界線を持つフッター div

Question

私はスレートされたトップとボーダーを持つフッターを構築しています:

SVG に頼らずに CSS でこれを達成する方法はありますか (おそらく変換を使用)。

ありがとう

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

またはこれ: 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 3

ちょうど別の方法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;
 }
​

Answer 4

divグレーと黒を色として、2 つを重ねて使用すると、これが可能になると思います。それらを目的の場所に配置し、z-index で並べ替えます。