基于昨天的CSS绘制三角形，今天搞了个圆形的绘制，在半圆的时候简单的涉及了变换这个属性。
圆形
普通的圆形只需要一个简单的标签（border-radius）即可完成，可使用数字或者百分比来控制，通常只是为了做个圆角只需要几个像素即可
- .round {
- width: 100px;
- height: 100px;
- border-radius: 50%;
- background-color: #c40000;
- }
椭圆形
椭圆形与圆形最大的不同就是宽度，放大其宽度即可
- .ellipse {
- width: 200px;
- height: 100px;
- border-radius: 50%;
- background-color: #c40000;
- }
半圆
与上面的形状不同，半圆则需要完全使用边框来绘制，为了使半圆向上使用了新标签transform: rotate(-45deg);来跳转其角度
- .half_round {
- width: 0;
- height: 0;
- border: 100px solid #c40000;
- border-radius: 50%;
- border-right-color: transparent;
- border-top-color: transparent;
- -moz-transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
对角不规则圆
与昨天的三角形相同，只是加了个边框圆形
- .half_round_tb {
- width: 0;
- height: 0;
- border: 100px solid #c40000;
- border-radius: 50%;
- border-bottom-color: transparent;
- border-top-color: transparent;