Creating pointed tip with CSS

While working on a project I wanted to to make a navigation bar that has an arrow pointing to icons on right on mouse over.

Something similar to

sample-image

Here is how I had done it and how simple it is actually.

Lets Create a box with border :

.arrow-pointer {<br></br>
width: 20px;<br></br>  
height: 20px;<br></br>  
border-top: 20px solid #1cbbb4;<br></br>  
border-bottom: 20px solid #1cbbb4;<br></br>  
border-right: 20px solid #1cbbb4;<br></br>  
border-left: 20px solid #1cbbb4;<br></br>  
}```

<figure class="wp-caption alignnone" style="width: 73px">![Box with thick border](http://www.clipular.com/c/5153501854302208.png?k=UPkyZdzdAmp2sgzsOCGNJULKlx0)<figcaption class="wp-caption-text">Box with thick border</figcaption></figure>Let’s remove the width and height of box and give all border different colors

.arrow-pointer {

width: 0px;


height: 0px;


border-top: 20px solid #1C1EBB;


border-bottom: 20px solid #BB1C3A;


border-right: 20px solid #1cbbb4;


border-left: 20px solid #000000;


}```

It will look like this

All borders with 0 height and width

Now as we need pointer pointing towards right side , lets make all borders others than left one transparent.

.arrow-pointer {<br></br> width: 0px;<br></br>
height: 0px;<br></br>
border-top: 20px solid transparent;<br></br>
border-bottom: 20px solid transparent;<br></br>
border-right: 20px solid transparent;<br></br>
border-left: 20px solid #000000;<br></br>
}

And we will get what we want

Thanks All. Will explain how to create side navigation as shown in example in next post