はじめに

アドベントカレンダーといえばクリスマス。
クリスマスといえばツリー。
ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。

用意するもの

もみの木
電飾
てっぺんの星
オーナメント

作ってゆく

もみの木

まずはもみの木から。これがないと始まりませんからね。
何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。
いいんです。気にしません。borderを使っていい感じの三角形を作って、よしなに重ねていきます。
幹の部分もborderを使って台形を作り背面に置きます。

See the Pen tree by sasakiy (@sasakiy0819) on CodePen.

電飾

とにかくもう何が何でもキラキラ光らせたかったので、オーナメントの前にこれを作ります。
作り方は簡単。適当なサイズの円を作り、アニメーションを使ってbox-shadowで光彩を加えていきます。

See the Pen light by sasakiy (@sasakiy0819) on CodePen.

てっぺんの星

まず、五角形の星型の内角の和は180°になるということを思い出すところから始めます。
正五角形の星型にするには頂点の角度は36°にしたいところなので、36°-36°-108°の三角形を３つ用意して、それらを重ねて正五角形を作ります。
これに黒丸背景を重ねればサッポロビールのロゴの完成ですね。

See the Pen star by sasakiy (@sasakiy0819) on CodePen.

オーナメント

本当は杖とかヒイラギの葉とか作りたかったんですが、断念しました。
プレゼントの箱を用意することにします。

See the Pen ornament by sasakiy (@sasakiy0819) on CodePen.

組み立てる

用意したパーツたちをひたすら並べて組み上げていきます。
アクセントにアニメーションで雪を降らせてみたりします。

See the Pen merged by sasakiy (@sasakiy0819) on CodePen.

まとめ

CSSってなんでもできますねー。
普段の業務ではなかなか機会のなさそうな使い方ですが、きっとどこかで約には立つのではないかと思います。