How to do: after the arrow only the outline?

Question

I looked at the violin posted on the question about a year and a half ago, and I'm looking for a little help to finish tuning it the way I want it.

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

Is there a way to make the triangle below only the border of the triangle instead of the solid? Or is there another method I would have to take to achieve this effect.

Answer 1

Take a look at ths fiddle - http://jsfiddle.net/hyH48/688/

I added another pseudo-element. I gave it the same border color of the background-colora elements and placed it over the existing one.

Here's the HTML and CSS in case you don't see it:

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 border-color*/ } #mybox:after { margin-top: -2px; border-color: #fff transparent transparent; /*non transparent color same as #mybox background-color*/ } 

Answer 2

See what I did: jsFiddle .

You can use: before the pseudo-element to draw the border of the triangle and a: after filling the triangle. You just need to make a few adjustments for the position and border values ​​in the after element after that, to make it smaller.

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