Question

Codepen：https://codepen.io/yongelee/pen/eVobRd

我想让背景没有白色，所以基本上将白色空间作为下一个块背景的颜色。但不幸的是，当我剪辑路径时，div不会从矩形变为梯形！

我的代码（JSX）：

fafnir

为此使用样式组件。

Answer 1

Ok这是我想出的：

＆＃13;

h1 {
  margin-top:0;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
}
.hero_cont {
  background-color:orange;
}
.hero {
  padding-top:21px;
    background: skyblue;
  height: 50vh;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.intro_cont {
  background-color:red;
}
.intro {
  padding-top:21px;
    background: orange;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}
.skills_cont {
  background-color:transparent;
}
.skills {
  padding-top:21px;
    background: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

＆＃13;

<div class="container">
  <div class='hero_cont'>
    <div class="hero">
      <h1>Hey</h1>
      <h4>heyy</h4>
    </div>
  </div>
  <div class='intro_cont'>
    <div class="intro">
      <h1>Hii</h1>
      <h4>Yoo</h4>
    </div>
  </div>
  <div class='skills_cont'>
    <div class="skills">
      <h1>One</h1>
      <h4>Noooo</h4>
    </div>
  </div>
</div>

＆＃13;

Answer 2

只需考虑一些负面利润：

.container {
  display: grid;
  grid-template-columns: 1fr;
}

.hero {
  background: skyblue;
  height: 50vh;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.intro {
  margin-top: -40px;
  background: orange;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}

.skills {
  margin-top: -40px;
  background: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

<div class="container">
  <div class="hero">
    <h1>Hey</h1>
    <h4>heyy</h4>
  </div>
  <div class="intro">
    <h1>Hii</h1>
    <h4>Yoo</h4>
  </div>
  <div class="skills">
    <h1>One</h1>
    <h4>Noooo</h4>
  </div>
</div>

Answer 3

我想将剪辑路径添加到div中，但不限于此部分。我可以剪辑div，并且可以在部分上进行线性渐变，因此，例如到剪切路径的部分为红色，因此我的部分的顶部也是clip，底部为蓝色，bc的下一部分将为蓝色。它分开了漂亮的内容：D

.section-stats {
  background: linear-gradient(to bottom, rgb(247, 247, 247), rgba(0, 0, 0, 0));
  position: relative;
  width: 100%;
  padding: 5rem 0;
// this is element which we want to clip
  &--clip {
    height: 100%;
    width: 100%;
    padding: 10rem 0;
    background-image: linear-gradient(
        to right bottom,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
      ),
      url("../../img/renovation-tools.jpeg");
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    -webkit-clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0, 50% 10%);
    clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
  }
  
  & .row {
    margin: 20rem 0 10rem;
  }


  &--icon {
    font-size: 10rem;
    color: $color-secondary-light;

    @include respond(tab-port) {
      font-size: 6rem;
    }
  }

  &--count {
    display: block;
    font-size: 7rem;
    color: $color-secondary-light;
    margin-top: -2rem;
    @include respond(tab-port) {
      font-size: 5rem;
    }
  }
  &--sub {
    display: inline-block;
    transform: translateY(0.8rem);
  }
}

<section class="section-stats ">
        <div class="section-stats--clip u-flex">
          <div class="row">
            <div class="col-1-of-3 u-center-text">
              <i class="lni lni-apartment section-stats--icon"></i>
              <span class="section-stats--count"
                >2<span class="section-stats--sub">3</span>8</span
              >
              <h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
            </div>
            <div class="col-1-of-3 u-center-text">
              <i class="lni lni-apartment section-stats--icon"></i>
              <span class="section-stats--count"
                >7<span class="section-stats--sub">5</span>1</span
              >
              <h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
            </div>
            <div class="col-1-of-3 u-center-text">
              <i class="lni lni-apartment section-stats--icon"></i>
              <span class="section-stats--count"
                >7<span class="section-stats--sub">5</span>1</span
              >
              <h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
            </div>
          </div>
        </div>
      </section>

是否可以填充背景颜色，因此没有白色？我在此屏幕截图中使用了clip-path css属性

3 个答案: