CSS: Comment attacher une flèche à un div et de le rendre chevauchement de la frontière

Je suis en train de faire une liste avec un message d'erreur, mais je vais avoir du mal à faire la flèche apparaissent au-dessus de la frontière de la div je suis attachant. Je vous serais reconnaissant de toute aide.

C'est ce que j'ai jusqu'à présent...

C'est le code CSS, je suis à l'aide, mais ne peux pas le faire fonctionner:

1.DIV pour l'ensemble de la liste:

<div class="info-popover">
    <div class="inner"></div>
    <div class="arrow"></div>
</div>

2.CSS pour chaque:

.info-popover {
    height: 250px;
    margin-top: -255px;
    position: absolute;
    width: 400px;
}

.info-popover .inner {
    background-color: #FFFFFF;
    border: 1px solid #003366;
    border-radius: 10px 10px 10px 10px;
    height: 240px;
    margin-top: 0;
    width: 100%;
}

.info-popover .arrow {
    background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
    height: 15px;
    position: relative;
    width: 100%;
    z-index: 999;
}

OriginalL'auteur Andre S | 2013-07-11

19

CSS solution:

http://jsfiddle.net/wn7JN/
```
.bubble 
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
```
J'étais sur le point de suggérer puisque c'est beaucoup plus CSS3 que d'utiliser des images (puisque vous tagged la Question CSS3). Cependant, j'ai préféré coller à la question, car à chaque fois que je suggère autre chose mes réponses d'obtenir des votes négatifs...
En effet, j'ai trouvé depuis CSS3 a été marqué et cela répond "CSS: Comment attacher une flèche à un div et de le rendre chevauchement de la frontière" Qu'il serait une bonne approche pour la résolution de ce.
C'est une bien meilleure approche. Peut-être, Santz, je devrais avoir dit que "toute aide sur ce, une meilleure solution est appréciée". Je suppose que je peux le faire la prochaine fois. Je souhaite que je pourrais accepter votre réponse, car je vais utiliser cette solution lors de la création d'un fichier css pour ie7, car il ne prend pas en charge ces css3 pseudo-éléments... j'ai upvoted votre réponse. Merci pour l'effort. Cette solution intégrée bien...
Génial, heureux de vous aider

OriginalL'auteur Andrew Clody

Façon la plus simple:

HTML:

<div class="meow">
</div>

CSS:

.meow { 
  height: 100px;
  width: 300px;
  margin: 30px;
  background: linear-gradient(#333, #222);
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.meow:after {
  content: " ";
  border-top: 11px solid #222;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: relative;
  top: 111px;
  right: -140px;
}

Aperçu en direct: CodePen.io

Viens de faire quelques modifications.

comment puis-je montrer le triangle à gauche ou à droite?

OriginalL'auteur Ronnel Martinez

Essayez ceci:

HTML

<div class="info-popover">
    <div class="inner"></div>
    <p class="arrow"></p>
</div>

CSS

.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 */
}

OriginalL'auteur Santiago Baigorria

Vous devez vous connecter pour publier un commentaire.