html - 仅使用 CSS 重新创建倾斜效果

Question

我正在尝试重新创建下面的图像:

我开始研究线性梯度规则。你能帮我复制这个倾斜的形状吗？
这是我到目前为止所做的:

 
.main_2 {
  width: 1000px;
  height: 600px;

  background-color: white;
  border: 1px solid red;

  display: flex;
  position: relative;
}

.container_2 h1 {
  position: absolute;
  top: 220px;
  left: 250px;
  right: 50%;
  border: 1px solid seagreen;
  width: 500px;

  color: white;
}

.one,
.two,
.three {
  position: relative;

  flex-grow: 1;
}

.one {
  background-color: #253cc3;
  background-image: linear-gradient(
    135deg,
    #253cc3 0%,
    #3745cb 50%,
    #2300ff 100%
  );
}
.two {
  background-color: #253cc3;
  background-image: linear-gradient(
    135deg,
    #253cc3 0%,
    #3745cb 50%,
    #2300ff 100%
  );
}
.three {
  background-color: #253cc3;
  background-image: linear-gradient(
    135deg,
    #253cc3 0%,
    #3745cb 50%,
    #2300ff 100%
  );
}

<div class="container_2">
  <div class="main_2">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <h1>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae,
      facere!
    </h1>        
  </div>
</div>

我这样做是否正确？最佳做法是创建 div 并尝试在其中创建形状？
非常感谢各位

Answer 1

这是一个只有一个元素的解决方案:

body {
  margin: 0;
}

.container {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  background: linear-gradient(to bottom, #455b80, #8191ac);
}

.container:before,
.container:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 10%;
  bottom: 0;
  background: linear-gradient(to bottom left, #0b2457, #2661c5);
  transform-origin: top;
  transform: skewX(-10deg);
}

.container:after {
  right: 40%;
  transform: skewX(-30deg);
  background: linear-gradient(to bottom right, #1b64ca, #1452a9);
}

.upper,
.lower {
  width: 80%;
  height: 80px;
  line-height: 80px;
  background-color: white;
  margin: 0 auto;
  text-align: center;
}

.lower {
  width: 50%;
  margin-top: 20px;
}

<div class="container">
  <div class="upper">Text Here</div>
  <div class="lower">Text Here</div>
</div>