< Back to Frontend Friday Folks Index

Christmas Tree

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (446 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #007065;
5 
    --c: #00A79D;
6 
  }
7 
  div {
8 
    inset: 25px 75px;
9 
  }
10 
  div::after {
11 
    inset: -225px -125px;
12 
    --c: #FFEECF;
13 
  }
14 
  div::before {
15 
    inset: -175px -125px;
16 
    --c: #F5C181;
17 
  }
18 
  div,div:after,div:before {
19 
    content: '';
20 
    position: absolute;
21 
    width: 0;
22 
    height: 0;
23 
    border-top: 0;
24 
    border: 125px solid transparent;
25 
    border-bottom: 100px solid var(--c);
26 
  }
27 
</style>
28
Using pseudo elements here to check the stacking seemed to be a good way to solve this.
Highlighted solution (385 characters)
1 
<div c></div>
2 
<div b></div>
3 
<div a></div>
4 
<style>
5 
  body {background:#007065}
6 
  div {
7 
    position: fixed;
8 
    left: 75;
9 
    width: 250;
10 
    height:100;
11 
    background: conic-gradient(at 50% 0, #0000 128.66deg, var(--c) 0 231.34deg, #0000 0);
12 
  }
13 
  [a] {
14 
    --c:#FFEECF;
15 
    top: 50;
16 
  }
17 
  [b] {
18 
    --c: #F5C181;
19 
    top: 100;
20 
  }
21 
  [c] {
22 
    --c:#00A79D;
23 
    top: 150;
24 
  }
25 
</style>
26
Saturday CSS battle made me redo this with a gradient!
Highlighted solution (230 characters)
1 
<c><b><a><style>*{background:#007065}a,b,c{position:fixed;left:75;width:250;height:100;background:conic-gradient(at 50%0,#0000 128.66deg,var(--c)0 231.34deg,#0000 0)}a{--c:#FFEECF;top:50}b{--c:#F5C181;top:100}c{--c:#00A79D;top:150
...and make it very small!
< Back to Frontend Friday Folks Index