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

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Download Instagram Videos & Photos.

Download Now

CURRENCY CONVERTER

Real Time Currency Converter

Convert Now

ROBOST.TXT GEN.

Robots.txt File Creater

Create Now

HTML MINIFIER

Compress yout HTML Code

Minify Now

CSS MINIFIER

Compress yout CSS Code

Minify Now

JAVASCRIPT MINIFIER

Compress yout JavaScript Code

Minify Now

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.