HTML5仅适用于底部

Question

我正在创建一个背景并使其仅从底部倾斜，但它也偏离顶部：

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

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

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

CODE：

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

Answer 2

如何使用多个背景来实现这一目标：

body {
 margin:0;
 height:100vh;
 background:
 linear-gradient(to bottom right,transparent 80%,#fff 80%),
 linear-gradient(150deg, #6840e6 43%, #5934b7 65%, #2c089c 85%);
}