How to make an :after arrow just an outline?

Question

I have looked at a fiddle posted on a question about a year and a half ago and am looking for a little help to finish customizing it to how i want it.

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

is there a way to make the triangle at the bottom just a border of the triangle instead of solid? Or is there another method i would have to take to achieve this effect.

Answer 1

Look what I did: jsFiddle.

You can use the :before pseudo-element to perform the triangle's border and a :after to fill the triangle. You just need to do a few tweaks to the position and border values at the :after element, 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
}
​

Answer 2

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

I've added another pseudo-element. I gave it the same border-color of the elements background-colora, and placed on top of the one already there.

Here's the HTML and CSS in case you can'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's border-color*/
}

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