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

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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!