我正在创建背景并使其仅从底部倾斜,但它也从顶部倾斜:
我只希望顶部保持笔直,只有底部倾斜
请确定,我不想使用绝对值,因为我想在顶部显示内容
图中突出显示的应该是直的。
代码:
#devheader {
width: 100%;
height: 575px;
background: linear-gradient(150deg, #6840e6 43%, #5934b7 65%, #2c089c 85%);
transform-origin: 0;
-ms-transform: skew(0deg, -12deg);
-webkit-transform: skew(0deg, -12deg);
transform: skew(0deg, -12deg);
top: 0;
content: " ";
display: block;
left: 0
}
请帮忙:
最佳答案
这很难用渐变来实现。我相信你会更好地使用图像。
如果梯度不是强制性的,你可以去看看我的代码笔:https://codepen.io/johandegrieck-the-encoder/pen/YLOXga
.supercontainer{
overflow:hidden;
position:relative;
height:300px;
color:white;
}
.container{
height:100px;
width:100%;
background:red;
display:flex;
z-index:0;
justify-content:center;
align-items:flex-end;
}
.secondcontainer{
transform: skew(0deg, -6deg);
width:100%;
height:350px;
background-color:red;
position:absolute;
top:-150px;
z-index:-1;
}
<div class="supercontainer">
<div class="container">
some content on top
</div>
<div class="secondcontainer">
</div>
</div>
关于HTML5 仅在底部倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50349789/