Subscribe

Public Solving: Making a CSS art Christmas tree

โœ๏ธ

How to create a Christmas tree in CSS art

23 Dec, 2021 ยท 3 min read

Today's puzzle is a bit different than anything we did before, as we are asked to hand over our version of a Christmas tree in CSS art.

You can find the complete puzzle here.

Coincidental I wrote a whole article on this approach last year, as there are many ways to achieve this. But all come with some pitfalls.

Read the article on creating tree Christmas threes in CSS

Creating a CSS Christmas Tree

For this puzzle, I've decided to use the clip-path version. During my research last year, this was the cleanest and most versatile version.

To set it up we need the following divs:

<div class="xmas-tree">
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

As you can see, there are three layers and two shadow layers.

As for the main wrapper I've decided to not recalculate the clip-paths but rather use a scale transform to make it a bit bigger:

.xmas-tree {
  position: relative;
  margin-top: 20px;
  transform: scale(3, 3);
  top: -250px;
  left: -150px;
}

Note: this is the cheap way of doing it ๐Ÿ˜… *(We should have opted to change the clip-paths)

Then the layer element will actually do most of the work to make a conic shape.

.xmas-tree .layer {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  clip-path: polygon(50% 5%, 100% 85%, 100% 100%, 0 100%, 0 85%);
}

This works because it actually creates a square, this gets converted to a circle, and we cut a sphere out.

CSS Clip path in action

The shadow layer uses the same pattern, but we slightly offset the conic sphere.

.xmas-tree .shadow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: black;
  clip-path: polygon(50% 0%, 0% 110%, 95% 100%);
  margin-top: 20px;
  margin-left: 10px;
}

However, now all the layers are stacked on top of each other. So let's offset them all a bit.

.xmas-tree div:nth-child(1) {
  transform: translateY(5px);
  z-index: 3;
}
.xmas-tree div:nth-child(2) {
  transform: translateY(0);
  z-index: 3;
}
.xmas-tree div:nth-child(3) {
  transform: translateY(40px);
  z-index: 2;
}
.xmas-tree div:nth-child(4) {
  transform: translateY(35px);
  z-index: 2;
}
div:nth-child(5) {
  transform: translateY(70px);
  z-index: 1;
}

And for the cherry on top, let's add an emoji star to our tree.

.xmas-tree:before {
  content: 'โญ๏ธ';
  position: absolute;
  left: 42px;
  z-index: 10;
  top: -9px;
}

Resulting in the following:

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Public Solving: Let it snow

29 Dec, 2021 ยท 4 min read

Public Solving: Let it snow

Bringing perspective to CSS

7 Aug, 2022 ยท 2 min read

Bringing perspective to CSS

Join 1900 devs and subscribe to my newsletter