border-style:dotted solid double dashed（上边框是点状,右边框是实线,下边框是双线,左边框是虚线）边框样式;border-width(边框宽度);border-radius(创建圆角);border-color(边框颜色);border-shadow(添加阴影);
案例1：太极图
HTML:
<div id="a1"></div>
CSS:
#a1 { width: 96px !important; height: 48px !important; background: #fff; border-color: #E8339B; border-style: solid;border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }
#a1:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff;border: 18px solid #E8339B; border-radius: 100%; width: 12px; height: 12px; }
#a1:after { content: ""; position: absolute; top: 50%; left: 50%; background: #E8339B;border: 18px solid #fff; border-radius:100%; width: 12px; height: 12px; }
最终效果：
案例2：三角
HTML:
<div id="b1"></div>
CSS:
#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
同理，
三角形向下：
#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #d40834;}
三角形right：
#b1 { width: 0;height: 0;border-left: 100px solid #d40834;border-right: 50px solid transparent;border-top: 100px solid #d40834;}
三角形left：
#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 100px solid #d40834;border-top: 100px solid #d40834;}
三角形top left：
#b1 { width: 0;height: 0; border-top: 100px solid red;border-right: 100px solid transparent;}
三角形top right：
#b1 { width: 0;height: 0;border-left: 100px solid transparent;border-top: 100px solid #d40834;}
三角形bottom right：
#b1 { width: 0;height: 0;border-left: 100px solid transparent;border-bottom: 100px solid #d40834;}
三角形bottom left：
#b1 { width: 0;height: 0;border-right: 100px solid transparent;border-top: 100px solid #d40834;}