CSS TRIANGLE

Step1: Make a div tag in between body tag. Then specify it's height, width and background color using CSS.

It's CSS div{
width:15px;
height:15px;
background-color:red;
}

#RESULT:

STEP2:Make its Border and specify any color.

It's CSS div{
width:15px;
height:15px;
background-color:red;
border-top:40px solid green;
border-right:40px solid green;
border-bottom:40px solid green;
border-left:40px solid green;
}

#RESULT:

STEP3: Now change the value of height and width of the div tag to zero(0) and hide or remove its background color property.

It's CSS div{
width:0px;
height:0px;
/*background-color:red;*/
border-top:40px solid green;
border-right:40px solid green;
border-bottom:40px solid green;
border-left:40px solid green;
}

#RESULT:

STEP4: Now change the color property of any alternate pair of border with "transparent".i.e; either left-right or top-botton. In my case i am going with the left and right border.

It's CSS div{
width:0px;
height:0px;
/*background-color:red;*/
border-top:40px solid green;
border-right:40px solid transparent;
border-bottom:40px solid green;
border-left:40px solid transparent;
}

#RESULT:

STEP5: Now hide any one of the remaining border property to get a triangle as your requirement.In this condition , I made to appear the bottom triangle.

It's CSS div{
width:0px;
height:0px;
/*background-color:red;*/
/*border-top:40px solid green;*/
border-right:40px solid transparent;
border-bottom:40px solid green;
border-left:40px solid transparent;
}

#RESULT:

#NOTE Similarly you can change the properties in accordance to get you desired triangle.