Comment puis-je créer une « queue d’info-bulle » en utilisant le CSS pure ?

Question

Je viens de tomber sur un joli CSS truc. Découvrez le violon...

http://jsfiddle.net/duZAx/1/

Cela crée une petite flèche/triangle effet, une "info-bulle de la queue". Ce souffle mon esprit! Je suis vraiment intéressé de savoir comment cela fonctionne?!

En outre, il est un moyen d'étendre cette CSS astuce pour créer un effet comme suit...

        

C'est un problème intéressant. Cela peut être fait en utilisant uniquement CSS, en ignorant l'ombre pour l'instant?

---

Mise à JOUR

J'ai trouvé une solution à ma question de départ. Voici le violon...

http://jsfiddle.net/duZAx/7/

Maintenant, comment dois-je exactement imiter la petite photo ci-dessus à l'aide de pure CSS, y compris l'ombre et de la croix-navigateur compatible?

---

Mise à JOUR

Voici ma solution après une combinaison des réponses ci-dessous. Je ne l'ai pas testé sur plusieurs navigateurs, mais il ressemble beaucoup dans Chrome.

http://jsfiddle.net/UnsungHero97/MZXCj/688/

---

Answer 1

Voici un exemple avec une boîte-ombre, tous les navigateurs de version plus récentes devraient soutenir ce

http://jsfiddle.net/MZXCj/1/

HTML :

CSS :

Answer 2

Voici une explication pour répondre à votre première question (que je vais quitter le CSS pour les autres comme je suis paresseux - s'il vous plaît upvote leurs réponses que vous pensez mériter la voix!):

Cela crée une petite flèche/triangle effet, une "info-bulle de la queue". Ce souffle mon esprit! Je suis vraiment intéressé de savoir comment cela fonctionne?!

1. Lors du rendu d'une frontière, avec des variations de couleurs du contour, mais le même style (dans votre cas, solid), de la couture en divisant chaque paire de coins adjacents est une ligne diagonale. C'est assez similaire à ce que le schéma ci représente de l' groove, ridge, inset et outset styles de bordure.

   Notez que tandis que tous les navigateurs se comportent de la même manière et l'ont fait pour aussi longtemps que je me souvienne, ce comportement n'est pas entièrement défini dans le CSS2.1 spécification ou de la CSS et de Milieux Frontières module. Ce dernier a une section décrivant la couleur et le style des transitions dans les coins, et la description semble impliquer que pour les bordures avec zéro rayons d'angle, la ligne qui est rendu est en fait une ligne qui joint le coin du bord de la marge intérieure à l'angle de la frontière bord (45 degrés angle de la ligne pour l'égalité de la largeur des frontières), mais la spec encore mises en garde que ce ne soit pas toujours le cas (surtout depuis qu'il n'a même pas compte des frontières avec zéro rayons d'angle de manière explicite).¹

2. Par le contenu d'origine (W3C) modèle de boîte, 40x40 zone est créée à partir du 20 pixels de frontières, avec le contenu, les dimensions étant défini comme 0x0.

3. La division d'un carré avec des lignes diagonales joignant ses quatre coins des résultats dans quatre triangles rectangles dont l'angle droit de répondre à la place du milieu (voir ci-dessous).

4. Haut, en bas et à gauche les frontières sont blanc pour s'adapter au fond de l' .tooltiptail de l'élément conteneur, tandis que la partie droite de la bordure est une nuance de bleu pour correspondre à la couleur de fond de l'info-bulle:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;
   

Le résultat est, avec l'frontières marquées, et la frontière des limites ajoutés à l'aide de mon fidèle de l'Outil en Ligne:

La réorientation de l'info-bulle de la queue est tout simplement une question de commutation de l'info-bulle de couleur autour. Par exemple, cela donnerait une queue attachée bas d'un conseil:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddle aperçu

---

¹_{Si vous êtes à cheval sur le respect des normes, on peut tout aussi bien penser que tout cela a un hack.}

Answer 3

Je ne cette info-bulle avec un seul div élément.

Regarde mon http://jsfiddle.net/DoubleYo/whbJb/5/

Edit pour Hristo : D'abord j'ai mon normale de div avec une bordure à l'instar d'autres exemple.

La queue est une simple combinaison de CSS :

• J'utilise le pseudo-sélecteur :avant (:après fonctionne très bien aussi)
• Je force le contenu avec un espace blanc pour faire la queue visible.
• Je tourne ma boîte de 45deg pour résoudre le coin à côté de l'info-bulle
• Pas de surprise pour la taille et le positionnement.
• J'ai ajouter une bordure sur les 2 côtés je veux.
• Et enfin je ajouter les ombres à l'extérieur des frontières.

Désolé pour mon mauvais anglais... je vous recommande de jouer avec toutes ces propriétés dans mon exemple, vous comprendrez mieux ;)

Answer 4

http://jsfiddle.net/qar7r/

Ombre (regards peu bizarre dans WebKit... je dois optimiser je suppose) :
http://jsfiddle.net/ZFpHU/3/, http://jsfiddle.net/ZFpHU/1/

Answer 5

Crossbrowser approche:

http://jsfiddle.net/easwee/QCuC6/

Celui-ci fonctionne à partir de IE7+ (fonctionne sous IE6 à l'aide de (filter: chroma(color=white);) mais n'affiche pas la bordure noire autour de la flèche, aussi jsfiddle rend les choses abit plus laid que dans le réel navigateur).

Mise à JOUR:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

Cela rendra le truand noir transparecy qui est rendu par IE6 la couleur que vous avez spécifié dans le filtre chroma (je n'ai blancs du moins c'est disappers en arrière-plan).

---

CSS 3 approche:

Vous pourriez le faire avec css3 rotation, mais il ne pourra pas non css3 compatible navigateurs:

http://jsfiddle.net/easwee/TebB2/