Create different shapes with CSS

December 1, 2018 2:30 pm Published by Leave your thoughts

 

Here you’ll find a range off shapes all coded with just pure CSS3 code. Unfortunately not all shapes will render correctly in all browsers, currently only web browsers that support CSS3 will produce the correct geometric shapes.

Square

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

Circle

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

Oval

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

Up Triangle

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Down Triangle

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

Left Triangle

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

Right Triangle

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

#triangle-bottomright { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-left: 100px solid transparent; 
}

Trapezium

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

Diamond

#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* 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%;
}

Rectangle

#rectangle {
   width: 140px; 
   height: 80px;
   background: blue;
}

Parallelogram

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

Pacman

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

Biohazard

#biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

Tags: , , ,

Categorised in:

This post was written by admin

Leave a Reply

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