我有以下代码:(Fiddle

body {
  background-color: red;
}
#grad1 {
  height: 100px;
  width: 100%;
  background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%);
}

<div id="grad1"></div>

我基本上希望宽度是响应的,并且即使宽度改变,梯度的形状也要保持不变。
我试过的:
将宽度设置为100%这不起作用,因为它是一个空div
就这样,老实说,我没有别的想法。如果有人能帮忙,我将不胜感激。
这就是我使用它的目的:(这些图片只是一个例子来说明发生了什么/我的意思)
html - 具有渐变响应的背景-LMLPHP
但如果我有一个更大的设备,就会发生这种情况:
html - 具有渐变响应的背景-LMLPHP

最佳答案

解决方案:(TL;DR)
如果需要响应渐变,最好使用to [side] [side]语法,而不是使用角度。下面是一个片段,它将产生一个响应三角形。

body {
  background-color: red;
}
#grad1 {
  height: 100px;
  width: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(255, 255, 255, 1) 50.1%);
}

<div id="grad1"></div>

说明:
如果我们仔细观察梯度的角度如何影响梯度的起点和终点,我们就可以理解为什么梯度在较小的宽度处变成三角形,在较大的宽度处变成梯形。
为什么倾斜的线性渐变会在不同的宽度产生不同的形状?
线性梯度总是由轴定义的(称为梯度线)。这可以被认为是一条穿过包含渐变的框中心(下面屏幕截图中的黑线)并按渐变的角度旋转的线。0度线从底部开始向上,而90度线则向右。
除了渐变线之外,渐变还有一个虚起点和终点。渐变的开始线是从框的左上角(与渐变线的起点在同一象限中的角)到渐变线的垂直线,结束线是从框的右下角(对角)到渐变线的垂直线。
根据渐变定义,虚渐变线上的每个点都有特定的颜色。在下面的例子中,我使用的渐变是透明的50%,其余为白色。所以渐变线上半部分的所有点都是透明的,下半部分的点都是白色的。
正如您在下面的屏幕截图中看到的,随着框的宽度增加,起点和终点之间的距离越来越大,这也会影响中点(中间的绿线)。因此,渐变为白色的点随着宽度的增加而改变,因此形状也随之改变。
html - 具有渐变响应的背景-LMLPHP
为什么边到边的线性渐变保持所有宽度的形状?
使用“边到边”语法时,渐变线将倾斜,使其指向指定角所在的同一象限(在这种情况下,它指向第二象限,因为该象限是框的右下角所在的位置)。它的角度也与连接盒子两个相邻角的直线垂直(在这种情况下,它是左下角和右上角)。由于渐变线的角度是自动调整的,因此它垂直于对角线(连接两个相邻角的线),因此它总是为半n半渐变生成三角形。
html - 具有渐变响应的背景-LMLPHP
下面的代码片段不是解决方案(位于顶部)。这是我用来制作上面的截图的,我想把它留在这里找乐子:D
对于角度渐变:
div {
  position: relative;
  display: inline-block;
  height: 100px;
  background: linear-gradient(521deg, transparent 50%, white 50%);
  margin: 200px 50px;
  border: 1px solid black;
}
#div-large {
  width: 400px;
}
#div-small {
  width: 200px;
}
div:after {
  position: absolute;
  content: '';
  width: calc(100% + 24px);
  left: -12px;
  background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
  background-position: 0px 0px, 0px, calc(50% - 1px);
  background-repeat: no-repeat, repeat-x;
  background-size: 100% 100%, 12px 2px;
  border-top: 2px dashed green;
  border-bottom: 2px dashed green;
  transform: rotate(521deg);
}
#div-large:after{
  height: calc(100% + 125px);
  top: -64px;
}
#div-small:after{
  height: calc(100% + 60px);
  top: -32px;
}
body {
  background: sandybrown;
}

<div id='div-small'></div>
<div id='div-large'></div>

对于侧向坡度:
div {
  position: relative;
  display: inline-block;
  height: 100px;
  margin: 200px 50px;
  border: 1px solid black;
}
#div-large {
  width: 400px;
  background: linear-gradient(526deg, transparent 50%, white 50%);
}
#div-small {
  width: 200px;
  background: linear-gradient(513.5deg, transparent 50%, white 50%);
}
div:after {
  position: absolute;
  content: '';
  width: calc(100% + 24px);
  left: -12px;
  background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
  background-position: 0px 0px, 0px, calc(50% - 1px);
  background-repeat: no-repeat, repeat-x;
  background-size: 100% 100%, 12px 2px;
  border-top: 2px dashed green;
  border-bottom: 2px dashed green;
}
#div-large:after{
  height: calc(100% + 93px);
  top: -48px;
  transform: rotate(526deg);
}
#div-small:after{
  height: calc(100% + 78px);
  top: -41px;
  transform: rotate(513.5deg);
}
body {
  background: sandybrown;
}

<div id='div-small'></div>
<div id='div-large'></div>

免责声明:我的解释很大程度上受到了这个MDN page的影响,但我尽量用自己的话来解释:)

关于html - 具有渐变响应的背景,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37185527/

10-10 23:38
查看更多