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

Как насчет использования нескольких фонов для достижения этого:

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

Answer 2

это будет трудно достичь с помощью градиентов. Я верю, что с изображениями тебе будет лучше.

если градиенты не обязательны, вы можете проверить мой код: 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>