css绘制圆形

  • A+
所属分类：CSS3

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

圆形

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

  1. .round {
  2.     width: 100px;
  3.     height: 100px;
  4.     border-radius: 50%;
  5.     background-color: #c40000;
  6. }

 

 

椭圆形

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

  1. .ellipse {
  2.     width: 200px;
  3.     height: 100px;
  4.     border-radius: 50%;
  5.     background-color: #c40000;
  6. }

 

 

半圆

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

  1. .half_round {
  2.     width: 0;
  3.     height: 0;
  4.     border: 100px solid #c40000;
  5.     border-radius: 50%;
  6.     border-right-color: transparent;
  7.     border-top-color: transparent;
  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. border: 100px solid #c40000;
  5. border-radius: 50%;
  6. border-bottom-color: transparent;
  7. border-top-color: transparent;

 

 

李金龙

发表评论

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