css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）

CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子

• 长方形

#Rectangle{
        width: 200px;
        height: 50px;
        background-color: red;
        color: white;  
        text-align: center;
}

• 正方形

#square{
        width: 200px;
        height: 200px;
        background-color: red;
        color: white;
        text-align: center;
}

• 实心圆

#perfect-circle{
        width: 200px;
        height: 200px;
        background-color: red;
        color: white;
        text-align: center;
        border-radius: 100px;
        /*-webkit-border-radius: 100px;*/
        -moz-border-radius: 100px;
}

• 圈

#circle{
        width: 200px;
        height: 200px;
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 100px;
        /*-webkit-border-radius: 10px;*/
        /*-moz-border-radius: 100px;*/
        border:3px red solid;
}

• 椭圆

#ellipse{
          width: 200px;
          height: 100px;
          background-color: red;
          color: white;text-align: center;
          border-radius: 100px/50px;
          /*-webkit-border-radius: 100px/50px;*/
          /*-moz-border-radius: 100px/50px;*/
}

• 上三角

#triangle-up {
        width: 0px;
        height: 0px;
        color: white;
        text-align: center;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        /*-webkit-border-top-left-radius: 50px solid transparent;*/
        /*-webkit-border-top-right-radius: 50px solid transparent;*/
        /*-webkit-border-bottom-left-radius: 100px solid red;*/
        /*-webkit-border-bottom-right-radius: 100px solid red;*/
    }

• 下三角

#triangle-down{
        width: 0px;
        height: 0px;
        color: white;
        text-align: center;
        border-top: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
}

• 左三角

#triangle-left{
        width: 0px;
        height: 0px;
        color: white;
        text-align: center;
        border-top: 50px solid transparent;
        bor