One of best cool features of CSS3 is that it reduces the use of images in web designs and allows you to create different shapes in CSS.

Commonforms that you usually see in Photoshop or Illustrator can now be done using CSS3. New CSS properties like transform and border-radius add complexity with shapes instead of creating them in drawing applications.

Examples:

Triangle

HTML

<span style="display: inline-block; width: 3em; height: 3em"><span style="position: relative; display: inline-block; width: 3em; height: 3em "><i style="position: absolute; display:inline-block; width:0; height:0; line-height:0; border:1.5em solid transparent; margin-top:-1.5em; border-bottom:1.5em solid #ff0000;left:0em; top:0em"></i></span></span>

CSS
.my-icon {
    position: relative;
}
.my-icon > i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 1.5em solid transparent;
    margin-top: -1.5em;
    border-bottom: 1.5em solid #ff0000;
    left: 0em;
    top: 0em;
}

 

Triangle

  

<style>

  .my-icon1 {

  position: relative;

  }

  .my-icon1 > i {

  position: absolute;

  display: inline-block;

  width: 0;

  height: 0;

  line-height: 0;

  border: 1.5em solid transparent;

  border-left: 1.5em solid #1142AA;

  border-bottom: 1.5em solid #1142AA;

  left: 0em;

  top: 0em;

  }
 

  </style>


<i class="my-icon1"><i></i></i>

Another Example of polygon

<i class="my-icon2"><i></i><i></i></i>


.my-icon2 {
    position: relative;
}
.my-icon2 > i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 0.8571428571428571em solid transparent;
    border-left: 0.8571428571428571em solid #1142AA;
    border-bottom: 0.8571428571428571em solid #1142AA;
    left: 0em;
    top: 0em;
}
.my-icon2 > i+i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 1.1785714285714286em solid #1142AA;
    border-right: 1.1785714285714286em solid transparent;
    left: 0.6428571428571428em;
    top: 6em;
}

Dynamic Css Generator which help in generating shapes in quick way.