css3 如何画圆

<div class="shanxing shanxing1">

    <div class="sx1"></div>

     <div class="sx2"></div>

</div>

<!--*绘制一个85度扇形*/--p>

<div class="shanxing shanxing2">

    <div class="sx1"></div>

     <div class="sx2"></div>

</div>

<!--*绘制一个向右扇形，90度扇形*-->

<div class="shanxing shanxing3">

    <div class="sx1"></div>

     <div class="sx2"></div>

</div>

<!--*绘制一个颜色扇形 */--p>

<div class="shanxing shanxing4">

    <div class="sx1"></div>

     <div class="sx2"></div>

</div>

<!--/*绘制一个不同颜色半圆夹角 */-->

<div class="shanxing shanxing5">

    <div class="sx1"></div>

     <div class="sx2"></div>

</div>

<style>

.shanxing{

    position: relative;

    width: 200px;

    height: 200px;

    border-radius: 100px;

    background-color: yellow;

}

.sx1{

    position: absolute;

    width: 200px;

    height: 200px;

    transform: rotate(0deg);

    clip: rect(0px,100px,200px,0px);/*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，

     使用clip属性，元素必须是absolute的 */

    border-radius: 100px;

    background-color: #f00;

    /*-webkit-animation: an1 2s infinite linear; */

}

.sx2{

    position: absolute;

    width: 200px;

    height: 200px;

    transform: rotate(0deg);

    clip: rect(0px,100px,200px,0px);

    border-radius: 100px;

    background-color: #f00;

    /*-webkit-animation: an2 2s infinite linear;*/

}

/*绘制一个60度扇形*/

.shanxing1 .sx1{transform: rotate(-30deg);}

.shanxing1 .sx2{transform: rotate(-150deg);}

/*绘制一个85度扇形*/

.shanxing2 .sx1{transform: rotate(-45deg);}

.shanxing2 .sx2{transform: rotate(-140deg);}

/*绘制一个向右扇形，90度扇形*/

.shanxing3 .sx1{transform: rotate(45deg);}

.shanxing3 .sx2{transform: rotate(-45deg);}

/*绘制一个颜色扇形 */

.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}

.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

/*绘制一个不同颜色半圆夹角 */

.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}

.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;      

</style>