ankitweblogic logo
W e b t u t o r i a l s

CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

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%;
}