CSS Shape Effects

CSS Shape Effects

Using The CSS we can create lot of type shape effects. In this article, we’ll cover some of the shape effects you can make with relatively little CSS code. These CSS box shapes can be applied with any html page and you can create amazing boxes shapes and make beautiful to your html page.

Lets start explains one by one how to create shapes, You can also download all shapes zip file using given downloading link below of article page.

Box Square Shape Code With CSS

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Square Shape Effect - phpkida.com</title>

<style>
.square {
   width: 150px; 
   height: 140px; 
   background: #3EA6F8;
}



</style>
</head>

<body>
        <div class="square"></div>
              
</body>
</html>

Box Circle Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Circle Shape Effect - phpkida.com</title>

<style>

.circle { 
   width: 140px;
   height: 140px;
   background: #3EA6F8; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

</style>
</head>

<body>
    
        <div class="circle"></div>
               
        
</body>
</html>

Rectangle Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Rectangle Shape Effect - phpkida.com</title>

<style>


.rectangle {
   width: 140px; 
   height: 80px;
   background: #3EA6F8;
}


</style>
</head>

<body>
        
        <div class="rectangle"></div>
        
</body>
</html>

Down Triangle Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Down Triangle Shape Effect - phpkida.com</title>
<style>

.down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid #3EA6F8;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

</style>
</head>

<body>
    
        <div class="down-triangle"></div>      
        
</body>
</html>

Left Triangle Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Left Triangle Shape Effect - phpkida.com</title>

<style>

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

</style>
</head>

<body>
        
        <div class="left-triangle"></div>
                
</body>
</html>

Right Triangle Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Right Triangle Shape Effect - phpkida.com</title>

<style>

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


</style>
</head>

<body>
        <div class="right-triangle"></div>
        
        
       
        
</body>
</html>

Triangle Bottom Left Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Triangle Bottom Left Shape Effect - phpkida.com</title>

<style>

.triangle-bottomleft { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid #3EA6F8; 
   border-right: 100px solid transparent; 
}


</style>
</head>

<body>
        
        <div class="triangle-bottomleft"></div>
        
</body>
</html>

Triangle Bottom Right Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Triangle Bottom Right Shape Effect - phpkida.com</title>

<style>
.triangle-bottomright { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid #3EA6F8; 
   border-left: 100px solid transparent; 
}


</style>
</head>

<body>
        
        <div class="triangle-bottomright"></div>
        
</body>
</html>

Triangle Top Left Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Triangle Top Left Shape Effect - phpkida.com</title>

<style>

.triangle-topleft { 
   width: 0; 
   height: 0; 
   border-top: 100px solid #3EA6F8; 
   border-right: 100px solid transparent; 
}


</style>
</head>

<body>        
        <div class="triangle-topleft"></div>        
</body>
</html>

Triangle Top Right Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Triangle Top Right Shape Effect - phpkida.com</title>

<style>

.triangle-topright { 
   width: 0; 
   height: 0; 
   border-top: 100px solid #3EA6F8; 
   border-left: 100px solid transparent; 
}


</style>
</head>

<body>        
        <div class="triangle-topright"></div>      
        
</body>
</html>

Upper Triangle Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Upper Triangle Shape Effect - phpkida.com</title>

<style>
.up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid #3EA6F8; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}


</style>
</head>

<body>
        
        <div class="up-triangle"></div>
        
        
       
        
</body>
</html>

Diamond Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Diamond Shape Effect - phpkida.com</title>
<style>


.diamond {
   width: 120px; 
   height: 120px; 
   background: #3EA6F8;
   margin:100px;
   
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}



</style>
</head>

<body>
        <div class="diamond"></div>
        
        
       
        
</body>
</html>

Egg Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Egg Shape Effect - phpkida.com</title>

<style>


.egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:#3EA6F8;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

</style>
</head>

<body>        
        <div class="egg"></div>        
</body>
</html>

Oval Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Oval Shape Effect - phpkida.com</title>

<style>

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


</style>
</head>

<body>
        <div class="oval"></div>
        
        
</body>
</html>

Pacman Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Pacman Shape Effect - phpkida.com</title>

<style>

.pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid #3EA6F8;
  border-left: 60px solid #3EA6F8;
  border-bottom: 60px solid #3EA6F8;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}



</style>
</head>

<body>
        <div class="pacman"></div> 
</body>
</html>

Parallelogram Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Parallelogram Shape Effect - phpkida.com</title>

<style>


.parallelogram {
   width: 130px; 
   height: 75px;
   background: #3EA6F8;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}




</style>
</head>

<body>
        
        <div class="parallelogram"></div>
        
</body>
</html>

Speech Bubble Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Speech Bubble Shape Effect - phpkida.com</title>

<style>

.speech-bubble {
   width: 120px; 
   height: 80px; 
   background: #3EA6F8;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
.speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #3EA6F8;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

</style>
</head>

<body>        
        <div class="speech-bubble"></div>
        
</body>
</html>

Trapezium Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Trapezium Shape Effect - phpkida.com</title>

<style>
.trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid #3EA6F8;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

</style>
</head>

<body>
        
        <div class="trapezium"></div>
</body>
</html>

Six Point Star Shape Code With CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Six Pont Star Shape Effect - phpkida.com</title>

<style>

.six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid #3EA6F8;
}
.six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid #3EA6F8;
   margin: 30px 0 0 -50px;
}

</style>
</head>

<body>
        
        <div class="six-point-star"></div>
        
</body>
</html>

Click on Image and download Source Code of This Tutorial

Download source code of css shapes with code

I hope you like this Article. Share with your friends.

Leave a Reply

Related Posts: You may like

Rotating Words with CSS Animations

Pure CSS Loader and spinners animation

Pure css drop down menu

Pure css dropdown navigation bar

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.