CSS3 Shapes

Using css properties we can create many different types of shapes. Few examples of shapes are mentioned below:

Left Triangle

Example 1: Left Triangle

<style>
   .div1{
      width: 0px;
      height: 0px;
      border-left: 100px solid green;
      border-top: 60px solid transparent;
      border-bottom: 60px solid transparent;
   }
</style>

Right Triangle

Example 2: Right Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-right:100px solid green;
      border-top:60px solid transparent;
      border-bottom:60px solid transparent;
   }
</style>

Top Triangle

Example 3: Top Triangle

<style>
   .div1{
      width:0px;
      height:0px; 
      border-left:60px solid transparent;
      border-right:60px solid transparent;
      border-top:100px solid green;
   }
</style>

Bottom Triangle

Example 4: Bottom Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-left:60px solid transparent;
      border-right:60px solid transparent;
      border-bottom:100px solid green;
   }
</style>

Top Left Triangle

Example 5: Top Left Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-left:100px solid green;
      border-bottom:100px solid transparent;
   }
</style>

Top Right Triangle

Example 6: Top Right Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-right:100px solid green;
      border-bottom:100px solid transparent;
   }
</style>

Bottom Left Triangle

Example 7: Bottom Left Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-right:100px solid transparent;
      border-bottom:100px solid green;
   }
</style>

Bottom Right Triangle

Example 8: Bottom Right Triangle

<style>
   .div1{
      width:0px;
      height:0px;
      border-left:100px solid transparent;
      border-bottom:100px solid green;
   }
</style>

CSS Diamond Shape

Example 9: CSS Diamond Shape

div{
    width: 200px;
    height: 200px;
    border: 5px solid #f99;
    transform: translateY(60px) rotate(45deg);
    margin: auto;
    background: #fee;
}

CSS Octagon Shape

Example 10: CSS Octagon Shape

CSS Loader

Example 11: CSS Loader shape

div{
    width: 200px;
    height: 200px;
    border: 15px solid #ffb0ad;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin: auto;
    border-radius: 50%;
}