背景与梯度响应

Question

我有以下代码:( 小提琴)

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>

我基本上希望宽度能够响应并且即使宽度改变也要保持渐变的形状.

我尝试过的:

1. 将宽度设置为100%这不起作用,因为它是一个空div

就是这样,我没有其他想法诚实.如果有人可以提供帮助我会很感激.

---

这就是我用它:(图像只是一个例子来说明发生了什么/我的意思)

但如果我有一个更大的设备,这会发生:

Answer 1

解决方案:(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>

说明:

如果我们详细了解渐变的角度如何影响渐变的起点和终点,则可以理解所讨论的梯度在较小宽度处变为三角形并且在较大宽度处变为梯形的原因.

为什么有角度的线性渐变会在不同宽度产生不同的形状？

线性渐变总是由轴(称为梯度线)定义.这可以被认为是通过包含渐变的框的中心(下面的屏幕截图中的黑线)绘制的线,并且旋转了渐变的角度.0deg线从底部开始向上,而90度线向右移动.

除了渐变线之外,渐变还具有假想的起点和终点.所述起始行梯度是从左上角的方框,梯度线和所述的(这是在同一象限的梯度线的起点的角部)的垂直线端线从右下的垂线框的角(对角)到渐变线.

根据梯度定义,此假想渐变线上的每个点都将具有特定颜色.在下面的例子中,我使用了50%透明的渐变,休息时是白色.因此,渐变线上半部分的所有点都是透明的,而下半部分的所有点都是白色的.

正如您在下面的屏幕截图中看到的那样,随着盒子宽度的增加,起点和终点之间的距离变得越来越大,这也会影响中点(绿色中间线).因此,渐变变为白色的点随着宽度的增加而变化,因此形状也会发生变化.

为什么左右线性渐变保持所有宽度的形状？

当使用左右语法时,渐变线成角度,使得它指向(或朝向)指定角落所在的同一象限(对于这种情况,它指向第二象限,因为这是右下角的位置盒子的一角是).它的角度也是这样的,它垂直于连接盒子两个相邻角落的线(在这种情况下,它是左下角和右上角).由于梯度线的角度被自动调整,使得它垂直于对角线(连接两个相邻角的线),因此它总是产生半个半半梯度的三角形.

在下面段不是解决办法(即顶部).这就是我用来创建上面的屏幕截图,并考虑将其留在这里以获得乐趣: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页面的影响,但我试图尽可能多地用自己的话说:)