In this tutorial, I am going to create an example for creating different shapes using CSS.

After completing this post you will be able to understand:

  • How to Create different shapes like Square, Rectangle, Circle using CSS.

CSS for creating different shapes using CSS:

Here I am sharing cheat sheet for creating different shapes using CSS.

Shapes

CSS for Diamond:

 

.diamond{
 width:100px; 
 height:100px; 
 border:1px solid indigo; 
 background:blue;
 margin:3px 0 0 30px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 transform-origin: 0 100%;
}

CSS for Rectangle:

 

.rectangle{
 width:100px; 
 height:60px; 
 border:1px solid #indigo; 
 background:blue;
}

CSS for Parallelogram:

 

.parallelogram{
 width:100px; 
 height:100px; 
 border:1px solid indigo; 
 background:blue;
 transform: skew(20deg); 
 -webkit-transform: skew(20deg);
}

CSS for Right Parallelogram:

 

.parallelogramRight{
 width:100px; 
 height:100px; 
 border:1px solid indigo; 
 background:blue;
 transform: skew(-20deg); 
 -webkit-transform: skew(-20deg);
}

CSS for Square:

 

.square{
 width:100px; 
 height:100px; 
 border:5px solid indigo; 
 background: blue;
}

CSS for Triangle:

 

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

CSS for Triangle Right:

 

.triangleRight{
 width:0; 
 height:0; 
 border-left:100px solid blue;
 border-top:50px solid transparent;
 border-bottom:50px solid transparent; 
}

CSS for Triangle Down:

 

.triangleDown{
 width:0; 
 height:0; 
 border-top:100px solid blue;
 border-left:50px solid transparent;
 border-right:50px solid transparent; 
}

CSS for Triangle Left:

 

.triangleLeft{
 width:0; 
 height:0; 
 border-right:100px solid blue;
 border-top:50px solid transparent;
 border-bottom:50px solid transparent; 
}

CSS for Half Circle:

 

.halfCircle{
 height:45px;
 width:90px;
 border-radius: 90px 90px 0 0;
 background:blue;
}

CSS for Circle Right:

 

.halfCircleRight{
 height:90px;
 width:45px;
 border-radius: 0 90px 90px 0;
 background:blue;
}

CSS for Circle Left:

 

.halfCircleLeft{
 height:90px;
 width:45px;
 border-radius: 90px 0 0 90px;
 background:blue;
}

CSS for Half Circle Bottom:

 

.halfCircleBottom{
 height:45px;
 width:90px;
 border-radius: 0 0 90px 90px;
 background:blue;
}

CSS for Circle:

 

.circle{
 height:45px;
 width:45px;
 border-radius: 45px;
 background:blue;
}

CSS for Oval:

 

.oval{
 height:45px;
 width:180px;
 border-radius: 90px / 45px;
 background:blue;
}

CSS for Quarter Circle Top Left:

 

.quarterCircleTopLeft{
 width:100px; 
 height:100px; 
 border:1px solid #000; 
 background: blue;
 border-radius: 90px 0 0 0;
}

CSS for Quarter Circle Top Right:

 

.quarterCircleTopRight{
 width:100px; 
 height:100px; 
 border:1px solid #000; 
 background: blue;
 border-radius: 0 90px 0 0;
}

CSS for Quarter Circle Bottom Left:

 

.quarterCircleBottomLeft{
 width:100px; 
 height:100px; 
 border:1px solid #000; 
 background: blue;
 border-radius: 0 0 90px 0;
}

CSS for Quarter Circle Bottom Right:

 

.quarterCircleBottomRight{
 width:100px; 
 height:100px; 
 border:1px solid #000; 
 background: blue;
 border-radius: 0 0 0 90px;
}

CSS for Chart Top:

 

.chartTop{
 width:0;
 height:0;
 border-right:60px solid blue;
 border-top:60px solid transparent;
 border-left:60px solid blue;
 border-bottom:60px solid blue;
 border-radius: 60px;
}

CSS for Chart Right:

 

.chartRight{
width: 0;
height: 0;
border-right: 60px solid transparent;
border-top: 60px solid blue;
border-left: 60px solid blue;
border-bottom: 60px solid blue;
border-radius: 60px;
}

CSS for Chart Bottom:

 

.chartBottom{
width: 0;
height: 0;
border-right: 60px solid blue;
border-top: 60px solid blue;
border-left: 60px solid blue;
border-bottom: 60px solid transparent;
border-radius: 60px;
}

CSS for Chart Left:

 

.chartLeft{
 width:0;
 height:0;
 border-right:60px solid blue;
 border-top:60px solid blue;
 border-left:60px solid transparent;
 border-bottom:60px solid blue;
 border-radius: 60px;
}

CSS for BookMark Ribbon:

 

.bookmarkRibbon{
 width:0; 
 height:100px; 
 border-right:50px solid blue;
 border-left:50px solid blue;
 border-bottom:30px solid transparent;
}

Hope this post about creating Different Shapes using CSS is useful for you.

Thank You.

Leave a Comment