HTML5 只为底部倾斜答案

【问题标题】：HTML5 skew just for bottomHTML5 只为底部倾斜
【发布时间】：2018-10-25 06:18:52
【问题描述】：

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

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

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

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

代码：

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

请帮忙：

【问题讨论】：

我不认为你可以做到这一点，如果你想要整个事情的一个背景，它要么歪斜，要么不歪斜。您总是可以在顶部元素下方设置第二个元素，该元素更长且偏斜，使其看起来只是一个元素，或者以某种方式将背景推高，以便看不到间隙
感谢@zack6849的建议

标签： html css css-transforms skew

【解决方案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>

【讨论】：

【解决方案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%);
}

【讨论】：