Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Sunday 16th of March 2014

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>



Tutorial Demo


Set status to Online
Set status to Offline
Set status to Busy
Turn off chat











That's it guys...



Comments
0

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement