J'essaie de faire une popover avec une erreur, mais j'ai du mal à faire ressortir la flèche au-dessus de la bordure de la Div, je l'attache. J'apprécierais toute aide.
C'est ce que j'ai jusqu'ici ...
C'est le code CSS que j'utilise, mais je ne peux pas le faire fonctionner:
1.Div pour l'ensemble de la colleure: 2.CSS pour chacun:
3 Réponses :
Essayez ceci:
HTML P>
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}
Solution CSS:
J'étais sur le point de suggérer car cela est beaucoup plus CSS3 que d'utiliser des images (puisque vous avez marqué la question CSS3). Cependant, je préférais rester à la question depuis chaque fois que je suggère différentes choses que mes réponses reçoivent des votes négatifs ...
En effet, j'ai pensé depuis que CSS3 était étiqueté et cette réponse "CSS: comment attacher une flèche à un div et le faire chevaucher la frontière" que ce serait une bonne approche pour résoudre ce problème.
C'est une approche bien meilleure. Peut-être, Santz, j'aurais dû dire "toute aide sur cette solution ou une meilleure solution est appréciée". Je suppose que je peux faire cela la prochaine fois. J'aimerais pouvoir accepter votre réponse aussi bien que je vais utiliser cette solution lors de la création d'un fichier CSS pour IE7, car elle ne prend pas en charge ces pseudo-éléments CSS3 ... J'ai suscité votre réponse. Merci pour les efforts. Cette solution a été bien équipée ...
moyen le plus simple:
html: CSS: aperçu en direct: < un href = "http://codepen.io/anon/pen/avzwdx" rel = "noreferrer"> codépen.io fais juste quelques modifications.