Public Solving: Making a CSS art Christmas tree

Public Solving: Making a CSS art Christmas tree

Chris Bongers
Β·Dec 23, 2021Β·

2 min read

Featured on daily.dev
Listen to this article

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:

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

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this