Boîte d'ombre CSS spéciale & | autre suggestion de remplacement

Question

J'écris du HTML/CSS et j'ai besoin de créer une ombre spéciale qui a une largeur personnalisée & hauteur autour d'un div.

Quelle est la meilleure façon de le faire? En ce moment, j'ai essayé d'utiliser deux chevauchant box-shadow mais je ne peux pas trouver un moyen de faire ressembler l'image.

Je sais que je pourrais juste créer deux divs et les gifler les uns sur les autres en spécifiant des hauteurs personnalisées et autres joyeusetés, mais je me demande s'il y a une approche plus propre, css seulement.

Answer 1

Vous pouvez utiliser ceci pour l'ombre de boîte. Je ne savais pas si vous vouliez afficher la barre verte également. Alors je l'ai laissé tomber.

Il y a une option de rayon de propagation dans la boîte ombre qui est souvent jamais utilisé:

/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 60px 0 0 -30px #ccc;

Dans ce cas, vous réglez ce paramètre sur un rayon négatif afin d'obtenir l'effet désiré. Faites de même pour le côté opposé et cela devrait fonctionner.

div{ 
 
    background: cyan; 
 
    position: relative; 
 
    height: 600px; 
 
    width: 400px; 
 
    margin: 50px auto; 
 
    box-shadow: 
 
    60px 0 0 -30px #ccc, 
 
    -60px 0 0 -30px #ccc; 
 
}

<div></div>

L'autre option est d'utiliser les :before ou :after pseudos