カスタムプロパティ（CSSの変数）を使って図形を描く

正方形

デモ

HTML

<div id="square"></div>

CSS

#square {
    --length: 250px;
    --color: #f48fb1;
    width: var(--length);
    height: var(--length);
    background-color: var(--color);
    margin: 10px auto;
}

デモにあるピンク色の図形は実際に div を使った正方形です。正方形なので縦と横の長さをそろえればいいだけです。変数 --length に長さを入れることで一元管理出来ていて、縦横の長さを一気に変更できます。

正三角形

デモ

HTML

<div id="triangle"></div>

CSS

#triangle {
    --length: 250px;
    --color: #f48fb1;
    width: 0;
    height: 0;
    border-bottom: calc(var(--length) / 2 * 1.732) solid var(--color);
    border-left: calc(var(--length) / 2) solid transparent;
    border-right: calc(var(--length) / 2) solid transparent;
    margin: 10px auto;
}

正三角形も底辺の長さだけ決めれば自動で高さも決まるようにします。カスタムプロパティは calc の中に入れることも出来るので、底辺の長さに合わせて高さを調整します。

高校生のときに習った60度の直角三角形の3辺の長さの比 1:2:√3 を利用して図のように計算します。√3は無理数なので小数で近似すればOKでしょう。

三角形自体を描く方法は有名な方法ですが、width、height を0にして border で作る方法を採用しました。

平行四辺形

デモ

HTML

<div id="parallelogram"></div>

CSS

#parallelogram {
    --width: 250px;
    --height: 200px;
    --angle: 70deg;
    --color: #f48fb1;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    transform: skewX(calc(90deg + var(--angle)));
    margin: 10px auto;
}

平行四辺形の形を決める要素は色々ありますが、底辺と高さ、2辺のなす角の3つの要素を変数にすることにしました。transform の skew は要素を傾けるもので、角度の調整をするために calc で 90deg 足しています。60deg は 60度と同じ意味です。

今のところ、Firefox は skew 内で calc が使えないようなので、平行四辺形ではなく長方形になってしまっています。角度系の計算は出来ないのかもしれません。惜しいですね。

ひし形

デモ

HTML

<div id="rhombus"></div>

CSS

#rhombus {
    --diagonal-x: 300px;
    --diagonal-y: 200px;
    --color: #f48fb1;
    width: 0;
    height: 0;
    border-bottom: calc(var(--diagonal-y) / 2) solid var(--color);
    border-left: calc(var(--diagonal-x) / 2) solid transparent;
    border-right: calc(var(--diagonal-x) / 2) solid transparent;
    position: relative;
    margin: 10px auto calc(var(--diagonal-y) / 2 + 10px);
}

#rhombus::after {
    content: "";
    width: 0;
    height: 0;
    border-top: calc(var(--diagonal-y) / 2) solid var(--color);
    border-left: calc(var(--diagonal-x) / 2) solid transparent;
    border-right: calc(var(--diagonal-x) / 2) solid transparent;
    position: absolute;
    top: calc(var(--diagonal-y) / 2);
    left: calc(var(--diagonal-x) / -2);
}

ひし形に関してはどう作ろうか迷いました。正方形を45度回転させて縦横に transform で伸縮させる方法も考えましたが、結局、二等辺三角形を縦に2個重ねる方法にしました。上の三角形は div 下の三角形は after 疑似要素です。2個の三角形は正三角形を作るときと同じく border で作る方法を取っています。

対角線の横軸と縦軸の長さを変数に入れることで自動ですべて調整します。変数は after など疑似要素には伝搬するようなので、メインである div にのみ指定すれば大丈夫でした。

まとめ

もう少し色んな図形を書ければよかったのですが、この記事は取りあえずこれで。台形なんかも考えてみましたが形が自由すぎるので、かなり面倒くさそうです。

図形の書き方うんぬんよりもカスタムプロパティ、変数の使い勝手がかなり良いです。IE が対応していないので自由に使えないのが惜しいところですが、ネイティブ CSS でこれが使えるのは嬉しいです。