CSS Battle #45 – Magical Tree

[Narigo]

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!

[Narigo]

One box with linear gradients, using selectors instead of ids

<div>
  <div></div>
</div>
<dt></dt>
<style>
  body {
    background: #1A4341;
    box-sizing: border-box;
    border-left: 65px solid #1A4341;
    margin: 0;
  }
  body>div {
    border: 30px solid #F3AC3C;
    border-top-width: 0;
    border-right-width: 15px;
    display: flex;
    justify-content: flex-end;
    width: 90px;
    height: 180px;
    -webkit-box-reflect: right;
  }
  div>div {
    border-left: 30px solid #998235;
    border-bottom: 30px solid #998235;
    height: 120px;
    width: 30px;
  }
  dt {
    background: linear-gradient(#1A4341 30px, #998235 0 60px, #1A4341 30px);
    border-right: 15px solid #F3AC3C;
    height: 90px;
    width: 120px;
    -webkit-box-reflect: right;
  }
</style>

[meg-gutshall]

My solution, that I'm very unhappy with – 600.49 {704}

<div class="outer-box"><div class="inner-box"></div></div>
<div class="bottom-line"></div>
<div class="vertical-line"></div>
<style>
  body {
    background: #1A4341;
    margin: 0;
  }
  div {
    position: relative;
  }
  .inner-box {
    height: 150px;
    width: 90px;
    border: 30px solid #998235;
    top: 10;
    left: 30;
  }
  .outer-box {
    height: 250px;
    width: 210px;
    border: 30px solid #F3AC3C;
    top: -100;
    left: 65;
  }
  .bottom-line {
    height: 30px;
    width: 270px;
    background: #998235;
    top: -70;
    left: 65;
  }
  .vertical-line {
    height: 400px;
    width: 30px;
    background: #F3AC3C;
    left: 185;
    bottom: 350;
    z-index: 20;
  }
</style>