Create Triangles using Plain CSS and No Images

Tweet

If someone asks you to create a graphic on a webpage using four triangles in a Square, how would you suggest he/she goes about it? Use JavaScript or Images?

I recently picked up a nice CSS trick from Paul (CSS guru) who told me how to achieve the above output using pure CSS. Here’s the code

CSS code:

#one{
height:0;
width:0;
border-top:80px solid #FFFF01;
border-left:80px solid #00FF00;
border-right:80px solid #0080FF;
border-bottom:80px solid #FE0002;
margin:20px;
}

and voila! You have your artwork! As you can see, by using simple CSS properties such as border, you can produce complex shapes and orientations without using JavaScript or Images

See a Live Demo

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.