背景颜色对角线拆分响应

Question

我正在使用 Bootstrap。

我需要达到这个结果：

为此我开始这样做：

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

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

如何让距离 A 和 B 在不同大小的 screen/window 上始终保持相同，以使其具有响应性。

谢谢

Answer 1

您可以在下面找到感兴趣的解决方案背景颜色对角线拆分响应[=12=]

.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>

Answer 2

我已经解决了我的问题：

<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>

背景颜色对角线拆分响应

Background color diagonal split responsive

css

background

translate-animation

twitter-bootstrap