【原创】CSS3 制作奥林匹克五环

其实网上对于制作五环有过例子，但是那些例子写的比较晦涩 而且注解不容易看懂，原理跟我的稍微有些差别

我做了简化，代码量偏少。

用了CSS3 的:after伪类

实质上我感觉:after用在这里并不好用

原因有：

1. jquery无法选择这个伪类，比如$(".round:after")没法选择得到东西

2. jquery无法选择的话，对于这个伪类的操作就不容易实现，比如动态调整css等，只能绕弯路（给head append一个<style>）

3. 在chrome开发工具里 看不到这个伪类 ，实质上没有把它当做一个元素处理。

 

所以:before 和 :after 其实还是尽量少用，只在简单排版里用。

 

尽管如此，还是跟很多范例一样，用了:after。

 

五环制作原理如下

 

1.五个并列的圆，不设置任何index

2.五个圆和别的圆重叠交叉的部分，预留缺口，border-right-color:transparent

3.用:after制作一个新元素 填补这个缺口，灵活调整这个缺口的z-index来实现交叠

 

演示效果如下，也可以猛击这里：http://jsfiddle.net/crabyan/6tg5Z/

 

这个version是缺口做成另外颜色的，比较容易理解思路：http://jsfiddle.net/crabyan/6tg5Z/41/