背景颜色对角线分割响应

问题描述：

我需要实现这样的结果：

为此，我开始做这个：

<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根据访问者屏幕不固定。如果我调整我的窗口它改变:( –

背景颜色对角线分割响应

相关推荐