Image Free Polygons Using Only CSS + HTML - No Javascript

This is post is now quite old and the the information it contains may be out of date or innacurate.

If you find any errors or have any suggestions to update the information please let us know or create a pull request on GitHub

Came across this intriguing idea to create polygons using only CSS and basic HTML - very simple and practical.

Here is the code

		div {
				border-left: 400px solid transparent;
				border-right: 400px solid transparent;
				border-top: 500px solid red;
				border-bottom: 0;
		<h3>The Triangle Below is a Single Div</h3>

The original blog post is here.

Live example is here


Ikreativ | cssWOW:: CSS Gallery
Stubbornella » Blog Archive » Object Oriented CSS, Grids on Github
1px Background Alignment Bug - Firefox/Safari/Chrome - Background
Tools - CSS Image Sprites —
Pacweb Internet » Blog Archive » CSS Image Rollovers with No
6 ways of styling a search form with css « CssFinest
CSS On-Hover Image Captions
Week 5: Advanced CSS: Part III, Site Outline, Production Schedule
Polygon and Sub-D Modeling in Maya | Free ebook download
30 free online image editing softwares
Best Web Design 2.0 Business Web Site Custom Design Services
Los Angeles Seo Services Include Web Design
Offshore Web Design and Development - Use Great Opportunities
Discover The Google Crush Method » Blog Archive » Custom Web

Tags: web designCascading Style Sheetscss imageimage free polygon