如何使用 CSS 创建倾斜背景？ [复制]答案

【问题标题】：How to create a Slanted Background with CSS? [duplicate]如何使用 CSS 创建倾斜背景？ [复制]
【发布时间】：2018-06-05 21:50:28
【问题描述】：

我附上了一张图片来显示确切的布局。照片中的线条仅用于显示颜色应更改的位置。

这是我尝试过的一些代码，但看起来不像我想要的那样。

.block {
  background-color: black;
  left: -50;
  height: 150px;
  width: 100%;
  transform: rotate(-40deg);
}

<body>
  <div class="block">

  </div>
</body>

【问题讨论】：

创建一个图像并将其用作背景怎么样？
这是一个糟糕的建议，因为它使用了更多资源，并且网站负载变得很重，而且它也没有响应。这可以通过 3 行代码的 CSS 来完成。

标签： html css background

【解决方案1】：

您可以使用带有倾斜变换的伪元素：

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

要在调整大小时保持相同的视觉效果，请为伪元素设置一个大固定高度并将其居中：

html {
  background: yellow;
}

html:before {
  content: "";
  position: fixed;
  top: calc(50% - 1000px);
  left: 0;
  width: 500px;
  height:2000px;
  background: #000;
  transform: skew(-15deg);
  transform-origin:top;
}

【讨论】：

【解决方案2】：

在某个角度使用线性渐变

body {
 margin:0;
 }

div {
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

我一直想知道为什么使用线性渐变（并且仅针对某个角度）两种颜色之间的线不是直的，它有点小故障......你知道为什么吗？它永远不会发生在旋转或倾斜中，我只看到线性和径向渐变的这种效果（也许是因为渐变是为了在某个点合并颜色？）
@TemaniAfif 好收获！在 Firefox 57 中几乎没有任何区别。另一方面，Chrome 63 以非常粗糙的锯齿状边缘渲染渐变。请参阅this fiddle 进行并排比较。可能浏览器应用了不同的抗锯齿。可能，正如您所说，因为梯度函数不适合如此急剧的过渡？只是一个想法！
@TemaniAfif 解决方案似乎是粗化（与圆形相反）数字：可能是“24.98%”或更好的“calc(25% +1px)”......最后似乎在更多浏览器中获得更好的结果，但并非总是如此。

【解决方案3】：

.left-sidebar {
  position: absolute;
  width: 20%;
  background: #000;
  transform: skewY(5px);
}
.content {
  background: #fff;
}

“弯曲”div 的属性是 CSS transform: skew(X,Y) 中的这个属性。试试看，希望对您有所帮助。

但我建议您并排创建 2 个div 以获得所需的效果。

【讨论】：