Dessiner une ombre ronde sur un élément carré avec CSS

Question

Est-il possible de créer un rond ombre (un cercle précis avec la valeur de propagation mis à zéro) sous un élément carré? E.g. un DIV sans bordures arrondies.

J'ai l'élément suivant, que je ne peux pas ajouter des balises plus à:

<div class="square"></div> 

En outre, je ne peux pas utiliser :before et :after pseudo-éléments, car ils sont déjà coiffés. C'est pourquoi j'essaie d'adapter la boîte-ombre.

J'associez un exemple de ce que je voudrais atteindre, pour mieux expliquer visuellement:

https://jsfiddle.net/landzup/L275p85L/

J'ai utilisé le pseudo-élément :before uniquement pour montrer le résultat.

Answer 1

Il y a plusieurs façons de s'y prendre. Je mettrais simplement le div carré dans un conteneur div plus grand, puis je le coifferais comme vous le souhaitez. J'ai inclus quelques exemples pour vous.

J'espère que cela aide! - James.

.square { 
 
    width: 20px; 
 
    height: 20px; 
 
    display: block; 
 
    position: relative; 
 
    background: #fff; 
 
    opacity: 1; 
 
    margin: 5px 0 0 5px; 
 
} 
 

 
.circle,.circle-with-spread { 
 
    display: block; 
 
    background-color: #000; 
 
    opacity: 0.3; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    position: absolute; 
 
} 
 

 
.circle-with-spread { 
 
    box-shadow: 0 0 5px 5px rgba(0,0,0,1); 
 
}

<!-- Example Circle Shadow --> 
 
<div class="circle"> 
 
    <div class="square"></div> 
 
</div> 
 
<!-- Spacing makes it look nice --> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<!-- Second Example --> 
 
<div class="circle-with-spread"> 
 
    <div class="square"></div> 
 
</div>