How to design a Down Triangle using CSS

This tutorial teaches you how to design a simple but powerful triangle pointing down using CSS.

I am sure we have been seeing things like this on Facebook, Google-plus, etc and wonder how it can be done. It is very easy to do using CSS.

Most of these designs are often done with an image in the CSS file and also with the help of a JavaScript but this one is special in the sense that it does not require an image or a JavaScript, it uses CSS only.

In this tutorial, we are going to use the CSS pseudo classes which are :before and :after with HTML codes to accomplish the task.

Below are the codes and demo of the tutorial and its very simple to understand and use in an application as it contains only few codes. .

CSS CODES

<style type="text/css">
.vpb_down_triangle 
{
position: absolute;
margin-bottom: 2em;
border: 1px solid #cbcbcb;
background:#FFF;
width:200px;
text-align:left;
box-shadow: 0 0 15px #cbcbcb;
-moz-box-shadow: 0 0 15px #cbcbcb;
-webkit-box-shadow: 0 0 15px #cbcbcb;
z-index:9999;
padding-bottom:5px;
bottom:16px; /* You can change this to position the box */
left:300px; /* You can change this to position the box */
}
.vpb_down_triangle:before, .vpb_down_triangle:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
.vpb_down_triangle:before {
bottom: -16px;
left: 144px;
border-top-color: #999;
border-width: 16px;
}
.vpb_down_triangle:after {
bottom: -15px;
left: 145px;
border-top-color: #FFF;
border-width: 15px;
}

.vpb_down_triangle_inner
{
color:black;
background:#FFF;
padding:8px; 
width:180px; 
text-align:left;
padding-left:10px; 
padding-right:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000;
border-bottom:1px solid #F1F1F1;
}

.vpb_down_triangle_inner:hover
{
color:#FFF;
background:#b60002;
cursor:pointer;
}

</style>

HTML CODES

<div class="vpb_down_triangle">

<div class="vpb_down_triangle_inner" align="left">
<div>Set status to Online</div>
</div>

<div class="vpb_down_triangle_inner" align="left">
<div>Set status to Offline</div>
</div>

<div class="vpb_down_triangle_inner" align="left">
<div>Set status to Busy</div>
</div>

<div class="vpb_down_triangle_inner" align="left">
<div>Turn off chat</div>
</div>

</div>