一、效果图

二、思路

  1. 通过border-radius: 50%来实现container画圆

  2. 通过伪代码before中以left和top、after中以right和top定位到对应圆心进行二次画圆及涂色即可实现

三、源代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>太极图</title><style>.container{width:96px;height:48px;border-radius:50%;border:2pxsolid#000;margin:0auto;position:absolute;border-bottom:50pxsolid#000;}div:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;background:#000;border:20pxsolid#fff;border-radius:50%;}div:after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;background:#fff;border:20pxsolid#000;border-radius:50%;}</style></head><body><divclass="container"></div></body></html>

更多相关文章

  1. 太极图作业
  2. 太极图作业
  3. CSS 动画属性，太极图实列演示
  4. 手敲CSS制作太极图
  5. css的太极图
  6. 使用css制作太极图
  7. Android绘图之绘制太极图
  8. Android绘图之绘制太极图
  9. Android(安卓)绘制太极图实例详解

随机推荐

  1. JS/PHP 浮点数精确运算
  2. 使用Jquery动态添加HTML返回[Object obje
  3. 将JavaScript命名空间拆分为多个文件
  4. 使用延迟到多个ajax调用的链循环
  5. Bootstrap面板：同一行上的文本和加号
  6. 使用Sinon模拟require（）函数
  7. 在项目之间共享ASP.NET MVC部分视图
  8. 获取拆分字符串数组的最后一个元素
  9. 我可以更改javascript“this”的上下文吗
  10. FusionCharts的Line.swf做法，我想出现2条