Discussion :

[hamerbeton]

Salut salut voila je bute depuis pas mal d'heures sur un problème:
j'ai 1 div qui a 2 pseudos éléments qui sont skewed. J'aimerai placer maintenant une image de fond en opacité faible qui épouse bien les bords de ma div et de mes pseudo éléments skewed comme sur cet exemple:
https://imgur.com/a/sNOct04
je vous met ci dessous le codepen:
https://codepen.io/Harada78160/pen/VwjpXJX
et mon code au cas ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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 éléments et ne se borne pas a rester dans sa div toute carrée 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!

[albedo0]

Bonjour,

Je te propose une approche différente...

Dans mon exemple, je met le skew sur l'élément avec l'image de fond et je fait un skew inverse sur son contenu.

https://jsfiddle.net/sxfy7wv4/