клип путь покрыть следующие div - PullRequest
Новая
       22

клип путь покрыть следующие div

0 голосов
/ 21 апреля 2020

Я пытаюсь создать путь для клипа, но это при запуске охватывает все, что происходит после этого. нет, если есть какое-либо свойство, чтобы предотвратить это. Я оставляю код Если я удаляю путь клипа, это прекращается. Вопрос в том, как, используя путь обрезки, я могу сделать диагональ непересекающейся в тексте, который следует за ней. Свойство CSS clip-path приводит к отображению части элемента путем определения области отсечения, которая будет отображаться, т.е. только части. Будет отображаться указанный элемент c. 

.phone {
  position: absolute;
  top: 1108px;
  width: 360px;
  height: 519px;
  left: -30px;
  z-index: 10;
}

.episodios {
  position: relative;
  top: 347px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 320px;
  height: 1203.5px;
  z-index: 100;
  -ms-flex-line-pack: center;
      align-content: center;
}



.episodiostitle {
  position: absolute;
  top: 64px;
  font-family: 'IBMPlexSans',sans-serif;
  font-size: 36px;
  color: #FFFFFF;
  letter-spacing: 0;
  }

.iframes {
  position: absolute;
  top: 127px;
  display: -ms-grid;
  display: grid;
  grid-column-gap: 11px;
}

iframe {
  width: 298px;
  height: 225px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.fondo {
  position: relative;
  top: 347px;
  width: 320px;
  height: 1203.5px;
  -webkit-clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%);
          clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%);
  background-image: linear-gradient(225deg, #0000FF 0%, #0000A3 100%);
}

.parrafo2 h2 {
  position: relative;
  top: 2001px;
  left: 16px;
  width: 288px;
  height: 84px;
  font-family: 'IBMPlexSans',sans-serif;
  font-size: 36px;
  color: #060A24;
  letter-spacing: 0;
  line-height: 42px;
}

.parrafo2 p {
  position: relative;
  top: 2093px;
  left: 10px;
  width: 288px;
  height: 254px;
  white-space: initial;
  font-family: 'IBMPlexMono',monospace;
  font-size: 14px;
  color: #060A24;
  letter-spacing: 0;
}

.container figcaption {
  position: relative;
  top: 2401px;
  left: 16px;
  width: 288px;
  height: 84px;
  font-family: 'IBMPlexSans',sans-serif;
  font-size: 36px;
  color: #060A24;
  letter-spacing: 0;
  line-height: 42px;
}
<div class="fondo">
        <div class="container_episodios">
       <h1  class="episodiostitle">EPISODIOS</h1> 

      <div class="iframes">
        <iframe class="jsparty-pod" src="https://open.spotify.com/embed-podcast/show/2ySVrxGkN6n6frMTo9Nsrt" allow="encrypted-media"></iframe>
        <iframe class="sintax-pod" src="https://open.spotify.com/embed-podcast/show/4kYCRYJ3yK5DQbP5tbfZby" allow="encrypted-media"></iframe>
          <iframe class="rework-pod" src="https://open.spotify.com/embed-podcast/show/5JxcIaIkN8zx3Zy7yD9snv" allow="encrypted-media"></iframe>
          <iframe class="ruby-pod" src="https://open.spotify.com/embed-podcast/show/2Iibd5A6R7mxkCm4NwNmUn" allow="encrypted-media"></iframe>
    </div>
</div>
<figure > <img class="phone" src="phone.png"> </figure>   
<div class="parrafo2">
    <aside>
              <h2>
                  De dónde <br>venimos</h2>
              <div class="text"> <p>Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light. 
                Our planet is a lonely speck in the great enveloping cosmic dark. In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.</p></div>
    </aside>
...