Css 背景色对角线分割响应_Css_Twitter Bootstrap_Background_Translate Animation

Css 背景色对角线分割响应

css twitter-bootstrap

Css 背景色对角线分割响应,css,twitter-bootstrap,background,translate-animation,Css,Twitter Bootstrap,Background,Translate Animation,我正在使用引导我需要实现这一结果：为此，我开始这样做： <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 3

我正在使用引导

我需要实现这一结果：

为此，我开始这样做：

<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%);
}


#对角线bg{
位置：绝对位置；
左：-800px；
宽度：200%；
最小高度：700px；
背景图像：-webkit线性梯度（118度，#fff 35%，#8aa8ec 35%）；
}

它几乎可以工作，因为只要我调整窗口大小，我就会得到：

如何使不同大小的屏幕/窗口之间的距离A和B始终相同，以使其响应

谢谢

您可以找到下面感兴趣的解决方案背景色对角线分割响应

.shape{
宽度：400px；
保证金：0自动；
}
.顶{
身高：0；
边框宽度：150px 400px 0px 0px；
边框样式：实心；
边框颜色：#d71f55透明#d71f55透明；
}
.底部{
高度：50px；
背景色：#d71f55；
}
/*支持IE6中的透明边框颜色*/
*html.top{
过滤器：色度（颜色=#123456）；
边框顶部颜色：#123456；
左边框颜色：#123456；
}

我已经解决了我的问题：

<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%);
}

谢谢您的回答@Shube结果很好，但根据访客屏幕，A&B不是固定的。如果我调整窗口大小，它将更改：(