时间戳

首页 > 解决方案 > 如何在不同形状的背景图像上制作双斜面

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

问题描述

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

标签： cssflexboxlinear-gradientsclip-path

解决方案

您可以像这样使用多个渐变：

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;
}

推荐阅读