仅使用 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

这是一个适用于 768 像素以上平板电脑屏幕的快速解决方案

* {
    box-sizing: border-box !important;
}

html,
body {
    padding: 0;
    margin: 0;
}


.container {
    position: relative;
    height: 100vh;
    background-color: #2661c5;
    overflow: hidden;
}

.skew1,
.skew2,.inner-skew {
    position: absolute;
    top: 0;
    height: 100%;
}

.skew1 {
    right: -15%;
    transform: skewX(-5deg);
    width: calc(30% + 60px);
    background: linear-gradient(to right, #455b80 0%, #8191ac 100%);
}

.skew2 {
    right: 14%;
    width: 45%;
    transform: skewX(-10deg);
    background: linear-gradient(to bottom, #0b2457 0%, #2661c5 80%);
}

.inner-skew{
    left: -65%;
    width: 100%;
    background-color: #2661c5;
    transform: skewX(-18deg);
}

.text {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

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

<div class="container">
    <div class="skew1"></div>
    <div class="skew2">
        <div class="inner-skew"></div>
    </div>

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

Answer 2

鉴于您的代码片段，您可以尝试以下操作：

.main_2 {
  height: 300px;
  width: 500px;
  
  resize: both;
  overflow: hidden;

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

  position: relative;

  /* Flex to manage proportions easier */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Text containers */
.heading {
  /* Align content inside the big box containing the headers */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  padding: 10px;
  box-sizing: border-box;
  
  /* Center the box */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  text-align: center;
  width: 100%;
}

.heading > * {
  padding: 10px;
  box-sizing: border-box;
  background: white;
  width: 100%;
}

.heading h1 {
  max-width: 400px;
}

.heading h3 {
  max-width: 300px;
}

/* Background */
.overlay {
  height: 100%;
  width: 100%;
  transform-origin: top;
}

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

.two {
  width: 10%;
  transform: scaleX(20) skew(-2deg) translateX(31%);
  background-image: linear-gradient(
    135deg,
    #253cc3 0%,
    #3745cb 50%,
    #2300ff 100%
  );
}

.three {
  width: 10%;
  transform: scaleX(6) skew(-2deg) translateX(40%);
  background-image: linear-gradient(
    135deg,
    #4f66ba 0%,
    #97a3b3 50%,
    #9ca9bc 100%
  )
}

<div class="main_2">
    <div class="overlay one"></div>
    <div class="overlay two"></div>
    <div class="overlay three"></div>
    
    <div class="heading">
      <h1>
        One heading here
      </h1>
      <h3>
        One other heading here
      </h3>
    </div>
  </div>

您绝对可以使用渐变来获得您需要的组合。

Answer 3

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

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>

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

Recreate Skew effect with only CSS

html

css

linear-gradients

css-shapes