<分区>
我附上了一张图片以显示确切的布局。照片中的线条只是为了显示颜色应该改变的地方。
这是一些我试过但看起来不像我想要的代码。
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}<body>
<div class="block">
</div>
</body> 
标签 html css background
<分区>
我附上了一张图片以显示确切的布局。照片中的线条只是为了显示颜色应该改变的地方。
这是一些我试过但看起来不像我想要的代码。
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}<body>
<div class="block">
</div>
</body>
最佳答案
你可以使用带有倾斜变换的伪元素:
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;
}关于html - 如何使用 CSS 创建倾斜背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47955102/