0
Help us understand the problem. What are the problem?
Organization

クリスマス・イブなのでクリスマスツリーを作る

この記事は ゆめみ Advent Calendar 2021 の24日目の記事です。

はじめに

みなさまは「クリスマス」と聞いて何を思い浮かべますか?サンタクロースでしょうか。それともイルミネーションでしょうか。
私の場合は家の中に飾っていたクリスマスツリーを思い浮かべます。
我が家では、毎年クリスマスの日にクリスマスツリーの前にプレゼントとサンタさんからの手紙が置いてありました。もうクリスマスツリーは飾っていませんが、あの頃を思い出して HTML + CSS でクリスマスツリーを作ろうと思います。

昔は擬似要素( ::before / ::after )を使用して作成していましたが、 IE のサポートが終了するので clip-path を使用して作成します。
clip-path に関しては、 Clippy というサイトがおすすめです。

See the Pen star.html by takashi (@takashimelon) on CodePen.

ツリー

星と同じく clip-path を使用して作成します。葉の部分は polygon でもよかったのですが、少し丸みを帯びさせるために path で作成しています。

See the Pen tree.html by takashi (@takashimelon) on CodePen.

オーナメント

clip-path の circle でも作成できますが、慣れ親しんだ border-radius で作成しています。
また、オーナメントは基本光りませんが、アニメーションさせたくなったので光らせます。

See the Pen ornament.html by takashi (@takashimelon) on CodePen.

クリスマスツリー

星・ツリー・オーナメントを配置すれば完成です。

See the Pen christmas-tree.html by takashi (@takashimelon) on CodePen.

おわりに

メリークリスマス!

おまけ ~SVG編~

丸みをつけたいと思い、 SVG でも実装しました。ベジェ曲線を完全に理解すれば clip-path でも実装できますが、今回はシンプルかつ簡単に実装するために stroke-linejoin="round" で丸みを表現しました。

See the Pen christmas-tree.svg by takashi (@takashimelon) on CodePen.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?