CSS Geometric Shapes

by Vincy. Last modified on July 12th, 2022.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page