css绘制同心圆和三角形

同心圆：

利用css的border-radius属性

#aa{
    width: 50px;
    height: 50px;
    border-radius: 75px;
    background-color: red;
    border-color: blue;
    border-width: 50px;
    border-style:solid;
}

效果如下：

border-radius属性为整个div长度（width+borderwidth）的一半，即为圆

此处div宽为50，边宽为50，因此总共为150px，border-radius需要设置为75px

三角形：

利用三角形的边框绘制三角形，当div的宽高都为0，只设置border的width属性时：

#bb{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;

}

绘制一个向下的三角形：

#bb{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
}

将其余边框设置为透明，transparent属性。

必须设置transparent属性，且设置边框显示方式为solid或者其他非none属性，否则边框无法显示。