DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Public Solving: Making a CSS art Christmas tree
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Public Solving: Making a CSS art Christmas tree

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
lexlohr profile image
Alex Lohr

Nice one, Chris! I don't know how to add extra Christmas cheer to this one.

Collapse
 
dailydevtips1 profile image
Chris Bongers

some decorations? πŸ˜‚

CSS Art is not my strongest suit, but love to explore the options.
The winning one was also really cool:

twitter.com/themarcba/status/14703...

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›