Олимпийские кольца на HTML

По мере усложнения:
1). Использовать SVG ( http://upload.wikimedia.org/wikipedia/commons/5/5c/Olympic_rings_without_rims.svg )
2). Сами кольца можно сделать c помощью border-radius. А хитрые пересечения накладыванием одинаковых колец друг на друга и прочие извращения)
3). Нарисовать в canvas, если с математикой дружите.
4). Использовать WebGL.

создайте кольца при div, для div задайте свойство css border-radius.
чтобы сделать наложение, используйте для каждого div свойство css position, то есть, сделайте "кольца" слоями...

<div style=" width:100px; height:100px;border:blue solid 10px; position:absolute; left:0; top:0;border-radius: 50% 50% 50% 50%/50%; -webkit-border-radius: 50% 50% 50% 50%/50%; -moz-border-radius: 50% 50% 50% 50%/50%; opacity:0.7;"></div>
 <div style=" width:100px; height:100px;border:black solid 10px; position:absolute; left:80px; top:0;border-radius: 50% 50% 50% 50%/50%; -webkit-border-radius: 50% 50% 50% 50%/50%; -moz-border-radius: 50% 50% 50% 50%/50%;opacity:0.7;"></div>
 <div style=" width:100px; height:100px;border:red solid 10px; position:absolute; left:160px; top:0;border-radius: 50% 50% 50% 50%/50%; -webkit-border-radius: 50% 50% 50% 50%/50%; -moz-border-radius: 50% 50% 50% 50%/50%;opacity:0.7;"></div>
<div style=" width:100px; height:100px;border:yellow solid 10px; position:absolute; left:40px; top:80px;border-radius: 50% 50% 50% 50%/50%; -webkit-border-radius: 50% 50% 50% 50%/50%; -moz-border-radius: 50% 50% 50% 50%/50%;opacity:0.7;"></div>
<div style=" width:100px; height:100px;border:green solid 10px; position:absolute; left:120px; top:80px;border-radius: 50% 50% 50% 50%/50%; -webkit-border-radius: 50% 50% 50% 50%/50%; -moz-border-radius: 50% 50% 50% 50%/50%;opacity:0.7;"></div>