Question

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

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

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

<body>
  <div class="block">

  </div>
</body>

Answer 1

作为线性渐变的替代方法，您可以使用具有偏斜变换的伪元素：

body {
 height:100vh;
 margin:0;
 background:yellow;
}
body:before {
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 left:-250px;
 width:500px;
 background:#000;
 transform:skew(-30deg);
}

Answer 2

以角度使用线性渐变

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

<div></div>

Answer 3

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

＆＃34;曲线＆＃34; div是CSS transform: skew(X,Y)中的此属性。尝试一下，希望它有所帮助。

但我建议你并排创建2 div以获得理想的效果。

如何用CSS创建倾斜的背景？

3 个答案: