一，三角形

#sanjiao{

            width: 0px;

            border-width: 10px;             border-style: solid;             border-color: transparent transparent tomato transparent;

}

产生三角形的原理是设置一个大小为0px的块状元素（一般是div），隐藏其边框的三个方向，只显示一个方向就产生了三角形

border-width：三角形的高度，

border-style: solid;  实体

border-color: transparent transparent tomato transparent;

(三角形生成后角的方向和三角形的颜色，设置的时候注意顺序是上右下左)

 

二，圆形

#circle{

            width: 500px;

            height: 500px;             -moz-border-radius: 50%;             -webkit-border-radius: 50%;             background-color: #000;

}

原理很简单，设置一个正方形的div,然后把其圆角设置为50%就可以，有一点需要注意：-webkit-border-radius（apple google识别,因为他们是webkit内核） -moz-border-radius（Firefox识别）

去掉哪个会对哪个做内核的浏览器有影响，所以最好都写上

 

三，圆角矩形

#yuanjiao{

            width: 50px;

            height: 20px;             border:1px solid #000;             border-radius: 33%;

}

原理也是很简单，设置一个矩形，然后设置圆角，border-radius百分比或者是像素都可以，根据比例还可以产生类型椭圆形，或圆形..