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

カスタムプロパティ、CSS における変数が色々なブラウザで対応できて来たので、それを使って CSS だけで図形を描いてみます。変数を使う絶対的な必要性はありませんが、使う事で大きさや色を一元管理出来て変更が楽なので、カスタムプロパティの有用性を自分の中で確認できました。

カスタムプロパティの使い方は以前記事で書きましたので、参考にしてみてください。

参考:ネイティブ CSS で変数を使う方法

-- 2つのハイフンで初めて変数定義、var で変数出力といった感じです。IE、Egde は今のところ対応していないので、対応しているブラウザでご覧ください。デベロッパーツールを使って、変数の値のみを変更してあげると各長さが一気に変更される様子がわかるかと思います。

custom-property

正方形

デモ

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 でこれが使えるのは嬉しいです。

Top