倾斜的背景 - CSS
Can*_*yer 7 html css background css3
我不太喜欢CSS,所以我认为这是微不足道的,但到目前为止我没有尝试过看起来我想要的东西.我附上了一张图片来展示确切的布局.照片中的线条仅用于显示颜色应该更改的位置.
这是我尝试过的一些代码,但看起来并不是我想要的.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}CSS表格
<body>
<div class="block">
</div>
</body>
Tem*_*fif 15
作为线性渐变的替代方法,您可以使用具有偏斜变换的伪元素:
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);
}- 这个对我的情况最有效.谢谢! (2认同)
以一定角度使用线性渐变
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}<div></div>