web-dev-qa-db-fra.com

Ombre de boîte CSS autour d'une forme personnalisée?

Salut,

J'ai besoin de créer un div qui ressemble à ceci:

screenshot

Ce que j'ai trouvé jusqu'à présent est le suivant: 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 l'ombre de la boîte autour de la queue de la bulle (la flèche triangulaire).

J'ai également essayé de ne pas utiliser les pseudo-classes avant et après mais d'utiliser un deuxième div qui ne contient que le triangle (avec transformation, rotation, ...) mais évidemment cela ne m'a pas conduit à aucun succès non plus.

Une image statique n'est pas une option car la taille du rectangle lui-même et la position de la queue sont à la fois dynamiques et peuvent changer pendant le "runtime".

J'ai également trouvé une solution où je crée la bordure et l'ombre avec un svg gerné dynamiquement. Si aucune autre option ne peut être trouvée, je vais m'en tenir à cette solution mais elle semble assez forte comme un "hack". Je ne poste pas cette solution ici car elle implique 2 javascript-framworks (extjs & raphael) et cette question devrait porter sur html & css. Néanmoins, je pourrais encore le fournir si quelqu'un s'y intéresse ...

Une dernière chose: la compatibilité du navigateur n'est pas si grave. Si ça marche dans les dernières versions des plus grandes (firefox, chrome, opera, ie 10, ...) tout va bien;)

Merci,

mik

htmlcsscss-shapes
30
suamikim

Utilisez l'ombre portée:

enter image description here

enter image description here

peut-être cet article (box-shadow-vs-filter-drop-shadow) vous aidera

35
Mark

Ce n'est probablement pas dans votre intérêt de le faire, je le laisse tel quel.

http://css-tricks.com/triangle-with-shadow/

Vous pouvez passer à "La méthode de la double boîte" et cela montre une manière très manuelle de le faire en utilisant :before et :after (que vous avez déjà utilisé pour faire la bulle) à l'aide de transform. Si vous vouliez vraiment faire cela, vous pourriez faire flotter la flèche vers la gauche et appliquer des ombres à travers les pseudo-éléments.

6
user1631995

Vous devez utiliser à partir de filter dans votre CSS, puis définissez la fonction drop-shadow($yourshadow) comme valeur. Il n'y a aucune différence pour écrire une ombre pour la fonction filter: drop-shadow($yourshadow) ou shadow: $yourshadow en tant que propriété. Vous pouvez écrire comme ci-dessous:

.shape1, .shape2{
  transform: rotate(35deg);
  background: yellow;
  height: 100px;
  width: 100px;
  display: inline-block;
}

.myshape{
  margin: 30px;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}
<div class="myshape">
  <div class="shape1"></div>
  <div class="shape2"></div>
</div>

Prendre plaisir...

0
Mohammad Fathi MiMFa