Question

我有以下代码：（Fiddle）

＆＃13;

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

＆＃13;

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

＆＃13;

我基本上希望宽度能够响应并且即使宽度发生变化也能保持渐变的形状。

我尝试过的事情：

将宽度设置为100％，这不起作用，因为它是一个空div

关于它，我没有其他想法诚实。如果有人可以提供帮助，我会很感激。

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

但如果我有更大的设备，就会发生这种情况：

Answer 1

解决方案：（TL; DR）

如果您需要响应式渐变，最好使用to [side] [side]语法而不是使用角度。下面是一个会产生响应三角形的片段。

＆＃13;

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

＆＃13;

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

＆＃13;

说明：

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

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

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

除了渐变线之外，渐变还具有假想的起点和终点。渐变的起始行是从框的左上角（与渐变线的起点相同的象限中的角落）的垂线。渐变线和结束线是从框的右下角（对角）到渐变线的垂直线。

此虚拟渐变线上的每个点都将具有一定的颜色，具体取决于渐变定义。在下面的例子中，我使用了50％透明的渐变，休息时是白色。因此，渐变线上半部分的所有点都是透明的，而下半部分的所有点都是白色的。

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

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

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

以下代码段不是解决方案 （位于顶部）。这就是我用来创建上面的屏幕截图，并考虑将其留在这里以获得乐趣：D

对于有角度的渐变：

＆＃13;

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

＆＃13;

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

＆＃13;

对于左右渐变：

＆＃13;

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

＆＃13;

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

＆＃13;

免责声明：我的解释深受此MDN page的影响，但我已尽量用自己的语言尽可能多地说明这一点：）

Answer 2

您也可以使用2个伪元素来生成所需的设计。

undefined

body {
  margin: 0;
  padding: 0;
  color: black;
  background: #eee;
}
h1 {
  padding: 0 1em;
}
p {
  padding: 1em;
}
.grad {
  background: black;
  color: white;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}
.grad:before,
.grad:after {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 100vw;
  border-color: transparent transparent #000000 transparent;
}
.grad:before {
  top: -50px;
}
.grad:after {
  bottom: -50px;
  border-width: 50px 100vw 0 0;
  border-color: #000000 transparent transparent transparent;
}

Answer 3

当你设置％时，它实际上意味着它是其容器的百分比。将grad1设置为正文宽度的100％后。

尝试将体宽设置为100％。

背景与梯度响应

3 个答案:

解决方案：（TL; DR）

说明：