Tutorials All - Webdesign, Graphic Design

Visit our new Webdesign Templates,css,html5 etc

Download New Android Applications

Visit our new Collections of Android Application

23.12.12

How to create Triangle using css code

Use This Code to Create Triangle


Up Triangle
#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Down Triangle
#down-triangle {
   width: 0;
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Left Triangle
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Right Triangle
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}


Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 100px solid transparent;
}

0 comments:

Post a Comment