株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

CSS3で丸を描画する

2016.2.10(Wed) 22:57 | CSS | sofuku

CSS3のみで丸を描画する方法をご紹介します。

 

環境

IE9+
Chrome
FireFox

 

DIVタグにクラスを指定します。

<div class="hoge"></div>

CSSは下記のように設定。

.hoge {
  background-color: #55acee;
  width:100px;
  height:100px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

ポイントは、要素のwidth、heightの半分をborder-radiusに指定するところ。
上記の例では50%で指定していますが、もちろん50pxと固定値を設定してもOKです。
背景色で丸の色を設定するとこんな感じに表示されます。

radius-sample01.jpg