CSS zone d'ombre autour d'une forme personnalisée?
Hy là,
J'ai besoin de créer un div qui ressemble à ceci:
capture d'écran http://imageshack.us/a/img19/8223/bubblep.png
Ce que je suis venu avec à ce jour est ceci:
http://jsfiddle.net/suamikim/ft33k/
.bubble {
position: relative;
width: 80px;
height: 160px;
border: 1px solid #33A7F4;
border-radius: 9px;
margin: 100px;
-webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
-moz-box-shadow: 0px 0px 20px 2px #33A7F4;
-ms-box-shadow: 0px 0px 20px 2px #33A7F4;
-o-box-shadow: 0px 0px 20px 2px #33A7F4;
box-shadow: 0px 0px 20px 2px #33A7F4;
}
.bubble:after, .bubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 17px solid transparent;
right: 100%;
}
.bubble-left:before {
border-top-color: #33A7F4;
border-right-color: #33A7F4;
top: 60px;
}
.bubble-left:after {
border-width: 16px;
border-top-color: black;
border-right-color: black;
top: 61px;
}
Comme vous pouvez le voir le "seul" problème est la zone d'ombre autour de la queue de la bulle (la forme triangulaire de la flèche).
J'ai aussi essayé de ne pas utiliser avant & après les pseudo-classes mais l'utilisation d'une deuxième div qui contient seulement le triangle (avec transformation, rotation, ...) mais évidemment cela ne m'a pas entraîné de pas de succès non plus.
Une image statique n'est pas une option parce que la taille du rectangle de lui-même et la position de la queue sont à la fois dynamiques et peuvent changer au cours de "l'exécution".
J'ai aussi trouvé une solution où je créer de la frontière, & l'ombre avec une dynamiquement gernerated svg. Si aucune autre option ne peut être trouvé, je vais rester avec cette solution, mais il se sent assez fort comme un "hack". Je ne suis pas l'affichage de cette solution, car elle implique 2 javascript-cadres conceptuels (extjs & raphael), et cette question devrait être d'environ html & css.
Néanmoins j'ai quand même pu la fournir si quelqu'un est intéressé...
Une dernière chose: compatibilité des navigateurs n'est pas que les grandes d'un accord. Si elle travaille dans les versions les plus récentes des grands (firefox, chrome, opera, ie 10, ...), tout est parfait 😉
Merci,
mik
Vous devez vous connecter pour publier un commentaire.
Utilisez drop-shadow:
peut-être cet article (box-shadow-vs-filtre d'ombre portée) vous aidera à
Ce n'est probablement pas dans votre meilleur intérêt à le faire, je le laisser comme il est.
http://css-tricks.com/triangle-with-shadow/
Vous pouvez passer à "La Double Méthode de Zone" et il montre une très manuel façon de faire cela à l'aide de
:before
et:after
(que vous avez utilisé déjà par faire de la bulle) avec l'aide detransform
. Si vous avez vraiment envie de faire cela, vous pouvez flotter la flèche à gauche et à appliquer des ombres à travers les pseudo-éléments.