Ajout d'une ombre de boîte à un div en forme de rectangle (jouant avec un rayon de bordure)

Est-il possible d'ajouter une ombre uniforme à un div qui n'est pas un rectangle régulier? Ajouter box-shadow ne fonctionne pas comme avec un div normal. C'est la div dont je parle:Ajout d'une ombre de boîte à un div en forme de rectangle (jouant avec un rayon de bordure)

#talkbubble { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius:   10px; 
} 
#talkbubble:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
}

Source

2016-09-15 Tomasz Hajduk

Vous essayez de faire un effet de frontière ou une ombre réelle? –

Relatif - http://stackoverflow.com/questions/16237181/how-to-add-bordered-triangle-over-a-div-tag –

J'essaie de créer un effet d'ombre réel autour de la div. Quand j'ajoute l'effet box-shadow maintenant il fait ombre dans une forme de rectangle à l'endroit où il y a un triangle fait de bordures. –

oui vous pouvez. Voici l'exemple:

.circle { 
 
width:150px; 
 
height:150px; 
 
border: solid 1px #555; 
 
background-color: #eed; 
 
box-shadow: 10px -10px rgba(0,0,0,0.6); 
 
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
 
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
 
-o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
 
border-radius:100px; 
 
}

<div class="circle"> 
 

 
</div>

Source

2016-09-15 13:41:54 izorgor

Ajout d'une ombre de boîte à un div en forme de rectangle (jouant avec un rayon de bordure)

Répondre

Questions connexes