CSS Battle #34 – Christmas Tree

[aishwarya-mali]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[AmyShackles]

This solution unsettles me, but it works!

Code Source – 604.58(100% match) {469 characters}

<div a></div>
<div b></div>
<div c></div>

<style>
  body {
    background:#007065;
    display:grid;
    justify-content:center;
  }
  div {
    width: 0;
    height: 0;
    border: 125px solid transparent;
    border-top:0;
    border-bottom: 100px solid #FFEECF;
  }
  [a] {
    margin-top:42;
    z-index:2;
  }
  [b] {
    border-bottom-color:#F5C181;
    margin-top: -92;
    z-index:1
  }
  [c] {
    border-bottom-color:#00A79D;
    margin-top:-93
  }
</style>

[AmyShackles]

Second verse, same as the first! (Today I learned that the hex value for fully transparent is #11ffee00 and the shorthand is #1FE0.)

Code Source – 606.04 (100% match) {440 characters}

<p a></p>
<p b></p>
<p c></p>

<style>
  body {
    background:#007065;
  }
  p {
    width:0;
    height:0;
    border:125px solid #1FE0;
    border-top:0;
    border-bottom:100px solid #FFEECF;
    margin:auto;
    position:relative;
  }
  [a] {
    margin-top:50;
    z-index:2;
  }
  [b] {
    border-bottom-color:#F5C181;
    margin-top:-50;
    z-index:1;
  }
  [c] {
    border-bottom-color:#00A79D;
    margin-top:-50;
  }
</style>

[Narigo]

Nice to see you solving it with borders!

One thing to add about the transparency: Any value with 00 in the end is fully transparent, so #fff0, #0000 or #abcdef00 all lead to full transparency, not just #1fe0

[Narigo]

I had to leave, but I managed to calculate the correct values to have conic gradients yield 100% match.

Code Source – 620.45 {312}

<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

[aishwarya-mali]

99.6% – 595.45{372}

<p><p a><p b>
<style>
body{
background:#007065;
}
p{
width:0;
height:0;
border:125px solid transparent;
border-bottom:100px solid #FFEECF;
border-top:0;
margin:50 0 0 67;
position:relative
}
[a]{
margin-top:-49;
border-bottom-color:#F5C181;
z-index:-1
}
[b]{
margin-top:-50;
border-bottom-color:#00A79D;
z-index:-2