如何在具有不同形状的背景图像上进行双重倾斜

Question

我正在从psd文件中完善我的培训网站。我有一张图片：

，我想使该图像看起来像：

我尝试了使用剪切路径和背景线性渐变，但是它们都不能一起工作，或者我不知道该怎么做。我应该使用SVG吗？

body {
background-color: black;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
 }

.standingMan {
  height: 80vh;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 84%, 33% 96%, 0 86%, 0% 30%);
  background: linear-gradient(-178deg, rgba(255,127,80, 0) 10%, rgba(255,127,80, 0) 90%, rgb(255,127,80, 1) 90%, rgb(255,127,80, 1) 100%),
  url('https://i.imgur.com/C0Wqb0o.jpg');
  background-size: 100% 100% ;
}

.standing {
  align-items: center;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.standing h1 {
  font-family: "Open Sans";
  font-size: 45px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.45px;
  padding: 1em;
}

.standing p {
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0.16px;
  width: 50%;
}

            <section class='standingMan'>
                <div class="container standing">
                    <h1>We launch leaders with big ideas</h1>
                    <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. 
                    Sed id mattis leo.</p>
                </div>
            </section>

Answer 1

您可以使用多个渐变，例如：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to bottom left, transparent 49%,#ff7f50 50.5%)  bottom/100% 20px,
    linear-gradient(to bottom left, transparent 49%,#000 50.5%)  0% calc(100% - 50px)/50% 40px,
    linear-gradient(to bottom right, transparent 49%,#000 50.5%)  100% calc(100% - 50px)/50% 40px,
    linear-gradient(#000,#000) bottom/100% 50px,
    url(https://i.imgur.com/C0Wqb0o.jpg) center/cover;
  background-repeat:no-repeat;
}

Answer 2

您可能只使用渐变，并最终尝试保持比率图像：

body {
  background-color: black;
}

.standingMan {
min-width: 800px;
  text-align: center;
  background: 
    linear-gradient(-178deg, rgba(255, 127, 80, 0) 95%, rgb(255, 127, 80, 1) 95.5%), 
    linear-gradient(5deg, black 12%, transparent 12.5%), 
    linear-gradient(-5deg, black 12%, transparent 12.5%), 
    url('https://i.imgur.com/C0Wqb0o.jpg');
  background-size: 100% 100%;
}

.container {
  display: inline-block;
}

.standingMan:before {
  content: '';
  padding-top: 42%;
  display: inline-block;
  vertical-align: middle;
}

.standing {
  align-items: center;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.standing h1 {
  font-family: "Open Sans";
  font-size: 45px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.45px;
  padding: 1em;
}

.standing p {
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0.16px;
  width: 50%;
}

<section class='standingMan'>
  <div class="container standing">
    <h1>We launch leaders with big ideas</h1>
    <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. Sed id mattis leo.</p>
  </div>
</section>