背景顏色對角線分割響應

我需要實現這樣的結果：

爲此，我開始做這個：

<body> 
    <div id="diagonal-bg"></div> 
</body> 

#diagonal-bg{ 
    position: absolute; 
    left: -800px; 
    width: 200%; 
    min-height: 700px; 
    background-image: -webkit-linear-gradient(118deg, #fff 35%, #8aa8ec 35%); 
}

它幾乎因爲只要我調整我在這裏的窗口的工作原理是什麼，我得到：

如何讓距離A和B在不同尺寸的屏幕/窗口中始終保持相同，以使其響應。

感謝

來源

2017-02-27 Stéphane J.

我已經解決了我的問題：

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

.background { 
    position: absolute; 
    width: 100%; 
    margin: 0 auto; 
} 
.top { 
    height: 100px; 
    background-color: #23d6c5; 
} 
.bottom { 
    width: 100%; 
    height: 500px; 
    background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%); 
}

body{ 
 
    background-color: white; 
 
} 
 

 
.background { 
 
    position: absolute; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.top { 
 
    height: 100px; 
 
    background-color: #2f3441; 
 
} 
 
.bottom { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%); 
 
}

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

來源

2017-02-27 10:40:51

您可以在下面找到感興趣的解決方案，響應背景色斜裂

.shape { 
 
    width:400px; 
 
    margin:0 auto; 
 
} 
 
.top { 
 
    height:0; 
 
    border-width:150px 400px 0px 0px; 
 
    border-style:solid; 
 
    border-color:#d71f55 transparent #d71f55 transparent; 
 
} 
 
.bottom { 
 
    height: 50px; 
 
    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="bottom"></div> 
 
    <div class="top"></div> 
 
    
 
</div>

來源

2017-02-27 09:04:26 Shube

感謝您的回答@Shube結果是好的，但A和B根據訪問者屏幕不固定。如果我調整我的窗口它改變:( –

背景顏色對角線分割響應

回答

相關問題