CSS Geometric Shapes

Following CSS styles will come handy when you want to draw geometric shapes with CSS without using images. Most of them are done using CSS3 and so check if you browser supports it.

Circle

.circle { 
   width: 100px;
   height: 100px;
   background: #07CAF3; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
}

Oval

.oval {
	height: 200px;
	width: 100px;
	background: #07CAF3;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

Triangle

.triangle {
	height: 0;
	width: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #07CAF3;
}

Triangle Sided

.triangle-sided {
	height: 0;
	width: 0;
	border-top: 100px solid #07CAF3;
	border-right: 100px solid transparent;
}

Rectangle

.rectangle {
   height: 100px;
   width: 200px; 
   background: #07CAF3;
}

Parallelogram

.parallelogram {
   height: 75px;
   width: 150px; 
   background: #07CAF3;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Trapezoid

.trapezoid {
	height: 0;
	width: 100px;
	border-bottom: 100px solid #07CAF3;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}

Cone

.cone {
  height: 0;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #07CAF3;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

These are all primitive geometric shapes. You can combine these and create more complex shapes like pentagon, hexagon, and more.