7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

YUMEMI Advent CalendarAdvent Calendar 2021

Day 24

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

Posted at

この記事は ゆめみ 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.

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?