Cómo hacer una flecha: ¿después de un contorno?

Question

He visto un violín publicado en una pregunta hace un año y medio y estoy buscando un poco de ayuda para terminar de personalizarlo como yo quiera.

http://jsfiddle.net/hyH48/641/

¿hay una manera de hacer que el triángulo en la parte inferior simplemente un borde del triángulo en lugar de sólidos? O hay otro método que debería tomar para lograr este efecto.

Answer 1

Tome un vistazo a THS violín - http://jsfiddle.net/hyH48/688/

He añadido otra pseudo-elemento. Le di el mismo color de borde de los elementos background-colora, y coloqué encima del que ya estaba allí.

Aquí está el código HTML y CSS en caso de que no se puede ver:

HTML:

<div id="mybox"> 
    This will be my tooltip 
</div>​ 

CSS:

#mybox { 
    position: relative; 
    width: XXXpx; 
    height: YYYpx; 
    border: 1px solid #000; 
    border-radius: 4px; 
    background-color: #fff; 
} 

#mybox:after, 
#mybox:before { 
    content: ""; 
    border-style: solid; 
    border-width: 10px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 100%; 
    left: 20px 
} 

#mybox:before { 
    border-color: #000 transparent transparent; /*non transparent color same as #mybox's border-color*/ 
} 

#mybox:after { 
    margin-top: -2px; 
    border-color: #fff transparent transparent; /*non transparent color same as #mybox's background-color*/ 
} 

Answer 2

Mira lo que hice: jsFiddle.

Puede usar el pseudo-elemento: before para realizar el borde del triángulo y a: after para completar el triángulo. Solo necesita hacer algunos ajustes a los valores de posición y borde en el elemento: after, para hacerlo más pequeño.

#mybox { 
    width:200px; 
    height:30px; 
    border-style:solid; 
    border-width:thin; 
    border-color:#000066; 
    border-radius: 4px; 
    position:relative; 
} 

#mybox:after{ // Our small triangle to fill the space 
    content:""; 
    border-color: #fff transparent transparent; 
    border-style:solid; 
    border-width:9px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-18px; 
    left:21px 
} 

#mybox:before{ 
    content:""; 
    border-color: #000066 transparent transparent; 
    border-style:solid; 
    border-width:10px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-20px; 
    left:20px 
} 
​