28111 sujets

CSS et mise en forme, CSS3

[Résolu] [HELP] Img de fond sur div avec skewed pseudo elements

Salut salut voila je bute depuis pas mal d'heures sur un probleme:
j'ai 1 div qui a 2 pseudos elements qui sont skewed. J'aimerai placer maintenant une image de fond en opacité faible qui epouse bien les bords de ma div et de mes pseudo elements skewed comme sur cet exemple:
https://imgur.com/a/sNOct04[/url]
je vous met ci dessous le codepen:
https://codepen.io/Harada78160/pen/VwjpXJX[/url]
et mon code au cas ou
Code :
<div class="container-fluid about-section-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="title-text pt-5 text-center about-title-2">
          <h1>Some Text</h1>
        </div>
      </div>
    </div>
  </div>
</div>


.about-section-2 {
    position: relative;
    margin-top: 8rem;
    margin-bottom: 5rem;
    padding-bottom: 15rem;
    background-image: url('https://via.placeholder.com/2500/0000FF/808080');
}
 
.about-section-2::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#003748;
    transform-origin: top left;
    transform: skewY(-4.5deg);
    z-index: -10;
}
 
.about-section-2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#003748;
    transform-origin: top right;
    transform: skewY(-4.5deg);
    z-index: -10;
}


du coup j'aimerai que mon image (le placeholder bleu pétant) épouse bien les angles des pseudo élements et ne se borne pas a rester dans sa div toute carréé et tout ça sans déformer l'image...
si quelqu'un pouvait m'aider je pète un peu un plomb la dessus!
merci beaucoup!
Modérateur
Bonjour,

Si les triangles au dessus et en dessous de l'élément principal restent blancs (les triangles complémentaires de tes pseudo-éléments), tu peux, au lieu de mettre tes pseudos éléments au dessus et en dessous, les mettre à l'intérieur et leur donner un fond blanc pour cacher une partie de l'élément principal.

Par exemple (j'ai mis 8vw en padding qui correspond à peu près à tangente(4,5°) si l'on suppose que l'élément principal fait 100% de la largeur de la fenêtre : à adapter en fonction de la situation réelle) :
.about-section-2 {
  position: relative;
  height: 10em;
  margin-top: 8rem;
  margin-bottom: 5rem;
  padding-top: 8vw;
  padding-bottom: 8vw;
  background-image: url("https://via.placeholder.com/2500/0000FF/808080");
}

.about-section-2::before {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  width: 100%;
  height: 8vw;
  top: 0;
  left: 0;
  background-color: #fff;
  transform-origin: top left;
  transform: skewY(-4.5deg);
}

.about-section-2::after {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  width: 100%;
  height: 8vw;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: top right;
  transform: skewY(-4.5deg);
}


On peut aussi le faire à l'ancienne avec des borders au lieu de skewY (toujours en supposant que l'élément principal fait 100% de la largeur de la fenêtre, sinon, il faut adapter) :
.about-section-2 {
  position: relative;
  height: 10em;
  margin-top: 8rem;
  margin-bottom: 5rem;
  padding-top: 8vw;
  padding-bottom: 8vw;
  background-image: url("https://via.placeholder.com/2500/0000FF/808080");
}

.about-section-2::before {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 100px solid white;
  border-right: 100vw solid transparent;
}

.about-section-2::after {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 100px solid white;
  border-left: 100vw solid transparent;
}

Amicalement,
Modifié par parsimonhi (26 Oct 2020 - 17:35)
Meilleure solution
Bonsoir!

Merci mille fois!
En voyant tes méthodes, je peux te dire que j’étais assez loin de la solution!
J’étais plus concentré sur la manipulation de mon image que sur la manière d'agencer et de repenser les pseudo éléments pour arriver au rendu!
Je te remercie encore, j'en ai la larme à l’œil, vraiment.

Passe une bonne soirée!
Sujet clos
Aller à