We have some cool, tool-tips on some websites,
This looks cool .

Here is the css to create this cool tool-tip arrow.

<div class="arrow_div">

now the css
First will give css to div.

<style type="text/ css">
        border:3px solid  black;
        position:relative;   /* This important to give position relative as we will be position arrow relative to this */

For this will use pseudo - selector :before and :after.

First will make give style to :after.

        content:"" left,right;
        border:10px solid transparent; /* this  will have no effect */
        border-left:10px solid white; /* important give colors here. this will  give the effect :NOTE 1 */

Now , our div looks like something as.

NOTE: 1:
if we give color like lightblue. then it will look like.

Now, we need to fix . this and get the covering border.
we , use :before.

    content:"" left,right;
     border:13px solid transparent;
     border-left:13px solid black; /* color of the main div and +width of main div's border */


Finally we get,

Below, is the link to the Fiddle . Feel free to play with it.

Thanks, if you have suggestions, please comment.