画像を使わずに、HTMLとCSSだけで円を作る方法です。とてもかんたんです。
画像を読み込む必要がないので、応答時間やページの表示時間が少しだけ短縮できます。
一番のメリットは、CSSでサイズや色をかんたんに変更できること。デメリットはそんなに使うことはないこと。
（意味ねーじゃんと言わないでください。）
画像を使った円と比べて、応答時間やページの表示時間が大幅に改善されるかといえばほとんど変わらないでしょう。
しかし、このような小さなことの積み重ねが結果的に大きな改善につながります。そのための方法のひとつです。
まずは、HTMLとCSS、その結果を見てみましょう。
See the Pen Circle by tadtadya (@tadtadya) on CodePen.
サンプルを見るとわかるように、作成方法はとてもかんたんです。width, heightを同じ値にして、 border-radiusの値をその半分にするだけ。
じつは、border-radiusの値を半分以上にすると同じ結果になります。つまり、border-radiusの値を50％以上にすると円ができる。
これは、border-radiusの特長を利用しています。特長を見てみましょう。
See the Pen border-radius sample by tadtadya (@tadtadya) on CodePen.
左上を例に見てみます。border-top-left-radiusは
[水平方向の径] [垂直方向の径]
を指定します。ひとつの値だけを指定すると、水平方向と垂直方向の径は同じになるので、円の4分の1を描画します。そのほかの角も同じ。
border-radiusにひとつの値を指定すると、左上、右上、右下、左下のすべての角が円の4分の1を描画します。逆にいえば、border-radiusの倍の値をwidth, heightに指定することで、正方形の中心がそれぞれの角の4分の1円の中心となり、結果として円が描画されます。
文章だとわけが分かりませんね？百聞は一見にしかずです。今の文章をHTML, CSSで表現すると次のようになります。
See the Pen circle2 by tadtadya (@tadtadya) on CodePen.
4つの1/4円を同じ色にすれば円の完成です。
『canvasで描けばそれでいいじゃん』と思いますが、canvasで描くと、スマホで見たときになめらかさがありません。なので、とりあえずこの方法を残しておきます。
昔はこうしていたという遺産を残す意味でもいいかなぁと。
