28172 sujets

CSS et mise en forme, CSS3

Bonjour, je cherche à faire une boite dont l'ombre serait en légère rotation comme cela est fait sur ce site :

https://www.bragelonne.games/

Pour l'instant j'ai fait ça...le soucis c'est que je ne parviens pas à faire une ombre dans le parametre before dont la taille s'adapterait à celle de la boite...

Par avance merci...


.item_encart_shadow {
margin-left: 50%;
position: relative;
top:100px;
width: 200px;
height: 200px;
background-color: red;
}
.item_encart_shadow:before {
z-index: -1;
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: -100px;
left: 0;
background-color: transparent;
box-shadow: 0px 110px #e4e0dc;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.item_encart_shadow:before {
z-index: -1;
position: absolute;
content: "";
display: block;
background-color: grey;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: rotate(-5deg);
}