HTML5 仅在底部倾斜

Question

我正在创建背景并使其仅从底部倾斜，但它也从顶部倾斜:

我只希望顶部保持笔直，只有底部倾斜

请确定，我不想使用绝对值，因为我想在顶部显示内容

图中突出显示的应该是直的。

代码:

#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
}

请帮忙:

Answer 1

这很难用渐变来实现。我相信你会更好地使用图像。

如果梯度不是强制性的，你可以去看看我的代码笔: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>