Come fare un: dopo la freccia solo un contorno?

Question

Ho guardato un violino postato su una domanda circa un anno e mezzo fa e sto cercando un piccolo aiuto per finire di personalizzarlo come voglio.

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

c'è un modo per rendere il triangolo nella parte inferiore appena un bordo del triangolo anziché solido? O c'è un altro metodo che dovrei prendere per ottenere questo effetto.

Answer 1

Date un'occhiata a THS violino - http://jsfiddle.net/hyH48/688/

ho aggiunto un altro pseudo-elemento. Gli ho dato lo stesso colore del bordo degli elementi background-colora, e posto sopra quello già lì.

Ecco il codice HTML e CSS nel caso in cui non si può vedere:

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

Guardate quello che ho fatto: jsFiddle.

È possibile utilizzare lo pseudo-elemento: before per eseguire il bordo del triangolo e a: after per riempire il triangolo. Hai solo bisogno di fare qualche ritocco alla posizione e ai valori del bordo nell'elemento: after, per renderlo più piccolo.

#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 
} 
​