How to design a Down Triangle using CSS

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>