如何在不同形状的背景图像上制作双斜面答案

【问题标题】：How to make a double slant on a background image with different shapes如何在不同形状的背景图像上制作双斜面
【发布时间】：2018-07-22 03:22:39
【问题描述】：

我正在从 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>

【问题讨论】：

只使用渐变，而不是剪辑路径，除非你想看透它。在某些情况下还有背景混合模式

标签： css flexbox linear-gradients clip-path

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

【讨论】：

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

【讨论】：