對角地切割背景圖片的div

我正在嘗試創建一個利用對角線部分的網站。 I am trying to get this kind of angle.對角地切割背景圖片的div

我還需要全面的瀏覽器支持。我已經看到了很多與多邊形修復，我已經嘗試旋轉div，但它擴展了我的瀏覽器寬度，並留下隨機空白的頂部。如果任何人都可以提供幫助，那將是驚人的。如果您需要澄清，請告訴我。

.shape { 
 
    width:400px; 
 
    margin:0 auto; 
 
} 
 
.top { 
 
    height:0; 
 
    border-width:0 0 100px 400px; 
 
    border-style:solid; 
 
    border-color:transparent #d71f55 #d71f55 transparent; 
 
} 
 
.bottom { 
 
    height: 0px; 
 
    background-color:#d71f55; 
 
} 
 

 
/* Support transparent border colors in IE6. */ 
 
* html .top { 
 
    filter:chroma(color=#123456); 
 
    border-top-color:#123456; 
 
    border-left-color:#123456; 
 
}

<div class="shape"> 
 
    <div class="top"></div> 
 
    <div class="bottom"></div> 
 
</div>

來源

2016-09-26 K-Dawg

我一直想這一點http://jsfiddle.net/UYRFY/2713/但角度不是我需要它的方向，我有一個很難改變它是正確的方式。 –

它看起來像你有什麼你需要的，只需要扭轉角度 – Huangism

本例中的代碼只能在「現代」的瀏覽器，但如果添加瀏覽器前綴，我相信可以工作回到IE9。它使用旋轉的div作爲「剪切」，但將該div放入overflow: hidden容器中，這樣您就不會看到您所說的空白。

.wrapper { 
 
    background: url(http://placehold.it/400/400/); 
 
    width: 400px; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    border: 10px solid black; 
 
    position: relative; 
 
} 
 

 
.cut { 
 
    background: #fff; 
 
    position:absolute; 
 
    top: 300px; 
 
    left: -50px; 
 
    width: 500px; 
 
    height: 300px; 
 
    transform-origin: center top; 
 
    transform: rotate(8deg); 
 
}

<div class="wrapper"> 
 
    <div class="cut"> 
 
    </div> 
 
</div>

來源

2016-09-26 15:38:35

感謝只是一個小調整，它的伎倆！ –

對角地切割背景圖片的div

回答

相關問題