Jak zrobić: za strzałką tylko zarys?

Question

Spojrzałem na skrzypce opublikowane na pytanie około półtora roku temu i szukam małej pomocy, aby zakończyć dostosowywanie go do tego, jak chcę.

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

czy istnieje sposób, aby trójkąt na dole po prostu granicy trójkąta zamiast stałe? Czy istnieje inna metoda, którą musiałbym podjąć, aby osiągnąć ten efekt.

Answer 1

Spójrz tys skrzypce - http://jsfiddle.net/hyH48/688/

Dodałem kolejną pseudo-element. Dałem mu ten sam kolor obramowania elementów background-colora i umieszczono na wierzchu tego, który już tam był.

Oto HTML i CSS w przypadku, gdy nie można go zobaczyć:

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

Look co zrobiłem: jsFiddle.

można użyć: przed pseudo-element do wykonywania granicy trójkąta i a: po wypełnić trójkąta. Trzeba tylko zrobić kilka poprawek do pozycji i wartości granicznych w elemencie: after, aby go zmniejszyć.

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