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

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

如果梯度不是强制性的，你可以去看看我的codepen：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%);
}

HTML5 只为底部倾斜

HTML5 skew just for bottom

html

css

css-transforms

skew