Create Triangles using Plain CSS and No Images

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?

image

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

image

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




About The Author

Suprotim Agarwal
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.

1 comment:

dragonbite said...

That's pretty good. So simple yet makes sense now looking at it!