如何用CSS创建倾斜的背景？ [重复]

问题描述 投票：5回答：3

这个问题在这里已有答案：

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

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

.block {
  background-color: black;
  left: -50;
  height: 150px;
  width: 100%;
  transform: rotate(-40deg);
}
<body>
  <div class="block">

  </div>
</body>

enter image description here

html css css3 background
3个回答
12
投票

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

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);
}
6
投票

以一定角度使用线性渐变

body {
 margin:0;
 }

div {
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
1
投票
.left-sidebar {
  position: absolute;
  width: 20%;
  background: #000;
  transform: skewY(5px);
}
.content {
  background: #fff;
}

“曲线”div的属性是CSS transform: skew(X,Y)中的这个属性。尝试一下，希望它有所帮助。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.