一、css绘制三角形
（一）基础css
.xiasanjiao{
width:0;
height:0;
overflow:hidden;//处理ie6的最小高度问题
border-width:10px;
border-color:red transparent transparent transparent;//若为上三角则
border-style:solid dashed dashed dashed;
}
（二）less匹配模式
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed dashed solid;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color: transparent @c transparent transparent;
border-style:dashed solid dashed dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.triangle(right,100px);
.triangle(left,100px);
}
二、圆形
（静态圆）
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* 宽度和高度需要相等 /
}
（动态圆）
/ 动画定义 /
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}</p> <p>/ 旋转，渐变色 */
advanced {
width: 200px;
height: 200px;</p> <p>
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
</p> <p> animation-name: spin;
animation-duration: 3s; /* 3 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
