Appliquer une image en fond sur une div qui a des pseudo element skewed
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:
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!
