How to create Amazing shapes with CSS

CSS

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

CSS 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 *