CSSで円を描き,内側にテキストを入れる
円をかいて,中に文字を入れるとはこのような絵のこと.
上
左
中央
右
下
左
中央
右
下
中の文字の位置指定のポイント
CSS は以下のようになる.
円は position: relative と相対指定にして,中の文字は position: absolute で絶対指定とする.
translateX(-50%) は文字の位置が指定した位置からになってしまうので,文字の中心を指定するために使っている.(縦方向の場合は translateY を使っている.)
CSS は以下のようにする.(サンプルコード)
HTML は以下のようになる.
円の中にグラデーションで色指定
グラデーションにしたい場合は以下のように
radial-gradient を使う.circle が指定してあるクラスに gradF9F を追加.
上
左
中央
右
下
左
中央
右
下
楕円を描きたい場合
楕円にしたい場合は以下のように
円のサイズを変更する.c120 を e120 に変更.
上
左
中央
右
下
左
中央
右
下
ご質問等ありましたら,下のフォームからお願いします.