css绘制圆形

基于昨天的CSS绘制三角形,今天搞了个圆形的绘制,在半圆的时候简单的涉及了变换这个属性。

圆形

普通的圆形只需要一个简单的标签(border-radius)即可完成,可使用数字或者百分比来控制,通常只是为了做个圆角只需要几个像素即可css绘制圆形

  1. .round {
  2.     width100px;
  3.     height100px;
  4.     border-radius: 50%;
  5.     background-color#c40000;
  6. }

 

 

椭圆形

椭圆形与圆形最大的不同就是宽度,放大其宽度即可css绘制圆形

  1. .ellipse {
  2.     width200px;
  3.     height100px;
  4.     border-radius: 50%;
  5.     background-color#c40000;
  6. }

 

 

半圆

与上面的形状不同,半圆则需要完全使用边框来绘制,为了使半圆向上使用了新标签transform: rotate(-45deg);来跳转其角度css绘制圆形

  1. .half_round {
  2.     width: 0;
  3.     height: 0;
  4.     border100px solid #c40000;
  5.     border-radius: 50%;
  6.     border-right-colortransparent;
  7.     border-top-colortransparent;
  8.     -moz-transform: rotate(-45deg);
  9.     -webkit-transform: rotate(-45deg);
  10.     -ms-transform: rotate(-45deg);
  11.     transform: rotate(-45deg);
  12. }

 

对角不规则圆

与昨天的三角形相同,只是加了个边框圆形css绘制圆形

  1. .half_round_tb {
  2. width: 0;
  3. height: 0;
  4. border100px solid #c40000;
  5. border-radius: 50%;
  6. border-bottom-colortransparent;
  7. border-top-colortransparent;

 

 

李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: