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

它的作用几乎是因为只要我调整窗口大小就是我得到的：

如何让不同尺寸的屏幕/窗口的距离A和B始终相同，以使其响应。

由于

Answer 1

您可以找到以下解决方案背景颜色对角线分裂响应

＆＃13;

pip3

＆＃13;

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

＆＃13;

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>

背景颜色对角线分裂响应

2 个答案: