CSS: border-radius で正円を描く
CSS3 では border-radius プロパティを使って正円を描くことができます。
まず正方形を用意して、正方形の長さの半分の値を border-radius の値として 指定します。下で具体的に見ていきましょう。
正方形を用意する
まず長さと高さが「100px」の正方形を作ります。
<div id="sample1"></div>
<style>
#sample1 {
width: 100px;
height: 100px;
background-color: darkblue;
}
</style>
border-radius を指定する
次に長さと高さ 100px の半分の値、「50px」を border-radius の値として指定します。 下に表示されているように、これだけで簡単に正円ができます。
<div id="sample2"></div>
<style>
#sample2 {
width: 100px;
height: 100px;
background-color: darkblue;
border-radius: 50px;
}
</style>
先程とはサイズの違う正円を描いてみます。 今回は高さと幅が「50px」の正方形から正円を作ります。 50px の半分の値、「25px」を border-radius の値に指定します。
<div id="sample3"></div>
<style>
#sample3 {
width: 50px;
height: 50px;
background-color: darkred;
border-radius: 25px;
}
</style>