知识点:
变形属性: 边框圆 (border-radius)/中心点 (transform-origin), 旋转 (transform:rotate) / 裁剪 (clip) [or 高宽一半]
通过js 控制进度
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .demo{ 8 position: relative; 9 margin: 50px auto; 10 width: 400px; 11 height: 400px; 12 border: 1px solid #000; 13 } 14 .left{ 15 position: absolute; 16 top: 0; 17 left: 0; 18 background: #c93328; 19 height: 400px; 20 width: 400px; 21 z-index: 1; 22 border-radius:50% 0 0 50%; 23 clip: rect(0px,200px,400px,0px); 24 } 25 .right{ 26 position: absolute; 27 top: 0; 28 right: 0; 29 background: green; 30 height: 400px; 31 width: 400px; 32 border-radius:0 50% 50% 0; 33 clip: rect(0px,400px,400px,200px); 34 } 35 </style> 36 </head> 37 <body> 38 <div class="demo"> 39 <div class="left"></div> 40 <div class="right"></div> 41 </div> 42 </body> 43 </html>
例子:
http://www.yangqq.com/web/css3demo/index.html
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet
原文：http://www.cnblogs.com/yyman001/p/4061859.html