サンプルを書いてみました。こんな感じでしょうか?
■ CSS で三日月を描くテスト - jsdo.it
http://jsdo.it/cx20/vFZb
<!DOCTYPE html> <html> <head> <style> .earth { width: 300px; height: 300px; background: blue; border-radius: 100%; } .moon { position: relative; overflow: hidden; left: 0px; top: 0px; width: 80px; height: 80px; border-radius: 100%; } .moon:before { content: "文字"; position: absolute; top: 30px; left: 10px; width: 80px; height: 80px; } .moon:after { content: ""; position: absolute; top: -30px; left: -30px; width: 80px; height: 80px; border: 20px solid gold; border-radius: 100%; } </style> </head> <body> <div class="earth"> <div class="moon"></div> </div> </body> </html>
CSSだけで三日月っぽいモノも描いてみた
http://blog.ethertank.jp/2010/05/10-20:07:17