CSSを使って描かれたオリンピックの輪 Olympic rings

PR

Olympic rings

http://codepen.io/MattSmith/pen/cHjIC

今の時期らいしいものですね
オリンピックの五輪の輪をCSSで作成したものです

あのリングとリングの重なりを表現しているのかちょっと不思議でした
なぜ重なっている箇所をあのようにできるかと考えていて、boder-radiusを解除してみると一気にわかりやすくなります

丸だとどうやって一部だけ?
って思ってしまうのですが、四角にすると、青色のリングでは右のborderのところだけを上書きして表示することでリングが重なっているように見せているのですね

コードを読み解くのは本当いい勉強になります。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー