頁腳DIV與定邊和邊境

我建立具有定頂部和邊境頁腳：頁腳DIV與定邊和邊境

enter image description here

有沒有辦法在CSS來實現這一（含轉換也許），而不必訴諸SVG？

感謝

2012-07-28 Sebastien

我只是一個單一的背景圖片貼（只是使它真的很寬，比如說2000px寬）。作爲一個PNG，它不會超過幾個KB。 – Dai 2012-07-28 11:30:56

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-28 11:39:07

太棒了。 – Sebastien 2012-07-28 11:40:46

我認爲使用兩個div是位於彼此，有灰色和黑色的顏色可以做到這一點。把他們的位置轉到想要的地方，然後用z-index對它們進行排序。

來源

2012-07-28 11:25:09

或者這樣：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-28 11:39:52

只是另一種方式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-28 12:00:54 Uttara

頁腳DIV與定邊和邊境

回答

相關問題