Можно ли заполнить цвет фона, чтобы не было белого? Я использую свойство css clip-path на этом снимке экрана.

https://imgur.com/a/ZTZp4

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

Я хочу, чтобы фон не был белым, поэтому в основном это белое пространство является цветом фона следующего блока. Но, к сожалению, когда я обрезаю путь, div не меняется с прямоугольника на трапецию!

Мой код (JSX):

<Wrapper>
<HeroBlock>
  <h1>hi</h1>
  <h4>hihi</h4>
</HeroBlock>
<IntroBlock>
  <h1>heyyy</h1>
  <h4>YO??</h4>
</IntroBlock>
<SkillsBlock>
  <h1>Heyy</h1>
  <h4>okkk</h4>
</SkillsBlock>
</Wrapper>

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr;
`
const HeroBlock = styled.div`
  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%);
`
const IntroBlock = styled.div`
  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%);
`
const SkillsBlock = styled.div`
  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%);
`

Для этого используются стилизованные компоненты.


layout css styled-components clip-path
person user7196887    schedule 04.03.2018    source источник
comment
Не могли бы вы отредактировать сообщение и добавить фрагмент кода?   -  person Kickass    schedule 04.03.2018
comment
@JuanTheron Есть код, ‹Wrapper› и ‹HeroBlock› и другие — это div, а стили находятся под ними.   -  person user7196887    schedule 04.03.2018
comment
Я это вижу, но фрагмент кода облегчает мне редактирование кода и поиск решения.   -  person Kickass    schedule 04.03.2018
comment
@JuanTheron codepen.io/yongelee/pen/eVobRd   -  person user7196887    schedule 04.03.2018

Ответы (3)


arrow_upward
0
arrow_downward

Просто рассмотрите некоторую отрицательную маржу, например:

.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>

person Temani Afif    schedule 04.03.2018

arrow_upward
0
arrow_downward

Хорошо, вот что я придумал:

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

person Kickass    schedule 04.03.2018

arrow_upward
0
arrow_downward

я хотел бы добавить путь к клипу в div, не ограничиваясь разделом. Я могу обрезать div, и я могу сделать линейный градиент на секции, поэтому секция до clip-path, например, красная, поэтому верхняя часть моей секции, где находится клип, также красная, а нижняя синяя, потому что следующая секция будет синей. Это отдельный приятный контент :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>

person Kamil Jaworski    schedule 03.07.2020