具有梯度响应的背景

Question

我有以下代码：(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

仅此而已，老实说，我没有其他想法。如果有人能提供帮助，我将不胜感激。

这就是我使用它的目的：（图片只是展示 happens/what 我的意思的示例）

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

Answer 1

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

尝试将正文宽度设置为 100%。

Answer 2

解决方案：(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 线从底部开始向上移动，而 90deg 线向右移动。

除了渐变线，渐变还有假想的起点和终点。渐变的起始线是框的左上角（与渐变线起点在同一象限的角）到渐变线的垂线，端线是盒子右下角（对角）到渐变线的垂线

根据渐变定义，这条假想渐变线上的每个点都会有特定的颜色。在下面的例子中，我使用了 50% 透明的渐变，其余部分为白色。所以渐变线上半部分的所有点都是透明的，下半部分的点都是白色的。

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

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

当使用并排语法时，渐变线 的角度使其指向（或指向）指定角所在的同一象限（为此在这种情况下，它指向第二象限，因为那是框的右下角所在的位置）。它的角度也是垂直于连接盒子两个相邻角的线（在这种情况下，它是左下角和右上角）。由于渐变线的角度会自动调整，使其垂直于对角线（连接两个相邻角的线），因此它始终会为 half-n-half 渐变生成一个三角形。

下面的 代码段不是解决方案 （在顶部）。这就是我用来创建上面的屏幕截图并想把它留在这里的乐趣：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>

Disclaimer: My explanation is heavily influenced by this MDN page but I've tried to put as much of it in my own words as possible :)

Answer 3

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

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

<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet scelerisque risus, eu scelerisque libero condimentum ut. Ut ac sapien placerat, suscipit odio vitae, vestibulum neque. Donec dui tortor, consequat rhoncus malesuada pharetra, dignissim
  sit amet mauris. Curabitur finibus arcu volutpat laoreet laoreet. Pellentesque mattis quam eget elit eleifend auctor. Fusce et nunc lobortis, laoreet leo sed, lacinia lorem. Nunc gravida eu eros et consequat.</p>
<div class="grad">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet scelerisque risus, eu scelerisque libero condimentum ut. Ut ac sapien placerat, suscipit odio vitae, vestibulum neque. Donec dui tortor, consequat rhoncus malesuada pharetra, dignissim
    sit amet mauris. Curabitur finibus arcu volutpat laoreet laoreet. Pellentesque mattis quam eget elit eleifend auctor. Fusce et nunc lobortis, laoreet leo sed, lacinia lorem. Nunc gravida eu eros et consequat.
  </p>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet scelerisque risus, eu scelerisque libero condimentum ut. Ut ac sapien placerat, suscipit odio vitae, vestibulum neque. Donec dui tortor, consequat rhoncus malesuada pharetra, dignissim
  sit amet mauris. Curabitur finibus arcu volutpat laoreet laoreet. Pellentesque mattis quam eget elit eleifend auctor. Fusce et nunc lobortis, laoreet leo sed, lacinia lorem. Nunc gravida eu eros et consequat.
</p>

具有梯度响应的背景

Background with gradient responsive

html

css

linear-gradients

responsive-design

css-shapes

解决方案：(TL;DR)

解释：