CSS实现圆形和孤形效果

一，圆形：

       

.circle {
 border-radius: 50%;
 }

 

二，半圆：

     

.semi-circle {
 border-radius: 100px 100px 0 0;
 height: 50px;
 }

 

四，扇形

     

.sector {
    border-radius: 100px 0 0;

}

 五，弧形：

  

.arc{
        border-radius: 100px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
 }