Public Solving: Making a CSS art Christmas tree

— 6 minute 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