Question

所以我有两个相邻的流体div，当设备大小改变时，当用户改变浏览器的字体大小时，或者用Ctrl +缩放浏览器时，可以改变它们的宽度。

我希望有一个跨越两个div的对角线，如下所示：

_____
|blah|
|blah|
|blah| 
|   /| <--- First div or section
|__/_|
| /  | <--- Second div or section
|/   |
|blah|
|blah|
|blah|
|____| 
<----> fluid width

我尝试使用CSS来避免下载图像并发出额外的http请求。所以我使用的是线性渐变。问题是当对角线的宽度增大或减小时，对角线的角度必须改变，否则对角线会断裂。

在这里看一个小提琴：http://dabblet.com/gist/50db5e6220b5ba557b9e

为了记录，上述小提琴的代码是：

/*
* Diagonal that crosses both divs without breaking
*/
div, p{margin:0;}
div{padding:0 1em;}
.one{
    background: #f06;
    background: linear-gradient(170deg, #f06 80%, yellow 80%, yellow);
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(170deg, #f06 20%, yellow 20%, yellow);
    font-size: 200%
}

和html：

<div class="one"><!-- foo --></div>
<div class="two"><!-- bar --></div>

我尝试将背景大小，背景位置，背景原点，单位从em更改为px，px更改为％，颜色停止等等。我的想法用尽了。

我的问题是......有没有办法让渐变中的角度取决于容器的宽度（以某种间接方式），这样如果调整大小，对角线会改变角度？我想要一个纯CSS解决方案（没有JavaScript）。

如果这是一个没有解决方案的问题，那就ok =）

Answer 1

您可以使用此解决方法：

<div class="wrapper">
    <div class="bg"></div>
    <div class="one"><!-- foo --></div>
    <div class="two"><!-- bar --></div>
</div>

.wrapper {
    position: relative;
}
.bg {
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow);
}

Demo

Answer 2

我猜你可以使用background-size和no-repeat来做到这一点。 DEMO

.one{
    background: #f06;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) right  #f06 ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) left yellow ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}

但是，如果两个div都有不同的高度，这看起来会很有趣： DEMO

You better set the gradient within the parent container (body for your dabblet) 我个人认为，除非您确实希望看到渐变角度突破。

渐变的角度是否可以取决于容器的宽度？

2 个答案: