人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: makocan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● cx20
●50ポイント

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

■ 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>

2 ● だわかき
●50ポイント

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ