CSS3でも、javascriptでも良いのですが

CSS3で描いた、円の左上に三日月型を表示し、その中に文字を記述したいと思うのですが、良いやり方はありませんか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/08 20:06:56
  • 終了:2013/08/15 20:10:03

回答(2件)

id:cx20 No.1

cx20回答回数603ベストアンサー獲得回数1072013/08/09 01:05:05

ポイント50pt

サンプルを書いてみました。こんな感じでしょうか?

■ 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>
id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/08/09 07:50:33

ポイント50pt

CSSだけで三日月っぽいモノも描いてみた
http://blog.ethertank.jp/2010/05/10-20:07:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません