私はブートストラップを使用しています。バックグラウンドカラー対角分割レスポンス
私はこの結果を達成する必要が： そのために
私はこれをやって開始しました：
<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を画面/ウィンドウのサイズによって常に同じにすることができますか？
おかげ
のための興味を持って、以下の解決策を見つけることができます。
<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>あなたは、私は私の問題を解決した 背景色対角線スプリット応答
.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>
答えてくれてありがとう結果@Shube良いのですが、A＆Bは、訪問者の画面に応じて固定されていません。私は私のウィンドウのサイズを変更する場合、それは変更:( –