We can create amazing solid shapes with CSS only using little effort. This can be easily done with the help of the borders and  after & before Pseudo-elements. In this post, CSS code for various popular shapes is given.

How to use CSS shapes?

Create a Div element and assigns it with an id of a particular shape according to the requirements.

Example – Create Star shape

<div id='star'></div>

 

Square

CSS Square

#square { 
		width: 150px;
		height: 150px;
		background: orange; 
	}

 

Circle

#circle {
		width: 150px;
		height: 150px;
		background: orange;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
	}

 

Rectangle

CSS Rectangle

#rectangle { 
			width: 200px;
			height: 100px;
			background: orange; 
	   }

 

Oval

CSS Oval

#oval   {
		width: 200px;
		height: 100px;
		background: orange;
		-webkit-border-radius: 100px / 50px;
		-moz-border-radius: 100px / 50px;
		border-radius: 100px / 50px;
	}

 

Triangle

CSS Triangle

#triangle{
		   width: 0; 
		   height: 0;  
		   border-left: 75px solid transparent; 
		   border-right: 75px solid transparent; 
		   border-bottom: 150px solid orange; 
		}

 

Triangle Bottom

Triangle Bottom

#triangle_bottom {
			width: 0;
			height: 0;
                        border-left: 75px solid transparent;
			border-right: 75px solid transparent;
			border-top: 150px solid orange;	
		}

 

Triangle Left

Triangle Left

#triangle_left {
			width: 0;
			height: 0;
			border-top: 75px solid transparent;
			border-right: 150px solid orange;
			border-bottom: 75px solid transparent;
		}

 

Triangle Right

Triangle Right

#triangle_right {
			width: 0;
			height: 0;
                        border-top: 75px solid transparent;
			border-left: 150px solid orange;
			border-bottom:75px solid transparent;	
		}

 

Triangle Top Left

image

#triangle_top_left {
			width: 0;
			height: 0;
			border-top: 150px solid orange;
			border-right: 150px solid transparent;
}

 

Triangle Top Right

Triangle Top Right

#triangle_top_right {
			width: 0;
			height: 0;
			border-top: 150px solid orange;
			border-left: 150px solid transparent;
}

 

Triangle Bottom Left

Triangle Bottom Left

#triangle_bottom_left {
			width: 0;
			height: 0;
			border-bottom: 150px solid orange;
			border-right: 150px solid transparent;
}

 

Triangle Bottom Right

Triangle Bottom Right

#triangle_bottom_right {
			width: 0;
			height: 0;
			border-bottom: 150px solid orange;
			border-left: 150px solid transparent;
}

 

Parallelogram

Parallelogram

#parallelogram {
			width: 200px;
			height: 100px;
			background: orange;
			-webkit-transform: skew(25deg);
	  		-moz-transform: skew(25deg);
	    		-o-transform: skew(25deg);
	
}

 

Trapezium

Trapezium

#trapezium {
		height: 0;
		width: 150px;
		border-bottom: 100px solid orange;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
	   }

 

Pentagon

image

#pentagon {
		width: 100px;
		position: relative;
		border-width: 80px 50px 0;
		border-style: solid;
		border-color: orange transparent;
		margin-top:100px;
	}

#pentagon:before {
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		top: -150px;
		left: -50px;
		border-width: 0 100px 70px;
		border-style: solid;
		border-color: transparent transparent orange;
	}

 

Hexagon

CSS Hexagon

#hexagon {
			width: 150px;
			height: 80px;
			background: orange;
			position: relative;
			margin:40px;
		}

		#hexagon:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			top: -50px;
			left: 0;
			border-left: 75px solid transparent;
			border-right: 75px solid transparent;
			border-bottom: 50px solid orange;
		}

		#hexagon:after {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			bottom: -50px;
			left: 0;
			border-left: 75px solid transparent;
			border-right: 75px solid transparent;
			border-top: 50px solid orange;
		}

 

Octagon

CSS Octagon

#octagon {
		width: 150px;
		height: 150px;
		background: orange;
		position: relative;
		margin:50px;
}

#octagon:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border-bottom: 45px solid orange;
		border-left: 45px solid #fff;
		border-right: 45px solid #fff;
		width: 60px;
		height: 0;
}

#octagon:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		border-top: 45px solid orange;
		border-left: 45px solid #fff;
		border-right: 45px solid #fff;
		width: 60px;
		height: 0;
}

 

Hut

CSS Hut

#hut {
		width: 150px;
		height: 80px;
		background: orange;
		position: relative;
		margin:40px;
	}

#hut:before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: -50px;
		left: 0;
		border-left: 75px solid transparent;
		border-right: 75px solid transparent;
		border-bottom: 50px solid orange;
	}

Star

CSS Star

#star {
		width: 0;
		height: 0;
		margin: 100px 0;
		position: relative;
		display: block;
		border-right: 100px solid transparent;
		border-bottom: 70px solid orange;
		border-left: 100px solid transparent;
		-moz-transform: rotate(35deg);
		-webkit-transform: rotate(35deg);
		-ms-transform: rotate(35deg);
		-o-transform: rotate(35deg);
		}

#star:before {
		height: 0;
		width: 0;
		position: absolute;
		display: block;
		top: -46px;
		left: -66px;
		border-bottom: 90px solid orange;
		border-left: 35px solid transparent;
		border-right: 35px solid transparent;
		content: '';
		-webkit-transform: rotate(-35deg);
		-moz-transform: rotate(-35deg);
		-ms-transform: rotate(-35deg);
		-o-transform: rotate(-35deg);
		}

#star:after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		display: block;
		top: 3px;
		left: -105px;
		border-right: 100px solid transparent;
		border-bottom: 70px solid orange;
		border-left: 100px solid transparent;
		-webkit-transform: rotate(-70deg);
		-moz-transform: rotate(-70deg);
		-ms-transform: rotate(-70deg);
		-o-transform: rotate(-70deg);
		}

 

Pacman

CSS Pacman

#pacman {
  		width: 0px;
  		height: 0px;
  		border-right: 80px solid transparent;
  		border-top: 80px solid orange;
  		border-left: 80px solid orange;
  		border-bottom: 80px solid orange;
  		border-radius: 80px;
  
}

 

Egg

image

#egg {
   		display:block;
   		width:140px; 
   		height:200px;
   		background-color:orange;
   		border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
   		-webkit-border-radius:70px 70px 70px 70px / 110px 110px 75px 75px;

}

Leave a Reply

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