< Back to Frontend Friday Folks Index

Magical Tree

Highlighted solution (716 characters)
1 
<div>
2 
  <div></div>
3 
</div>
4 
<dt></dt>
5 
<style>
6 
  body {
7 
    background: #1A4341;
8 
    box-sizing: border-box;
9 
    border-left: 65px solid #1A4341;
10 
    margin: 0;
11 
  }
12 
  body>div {
13 
    border: 30px solid #F3AC3C;
14 
    border-top-width: 0;
15 
    border-right-width: 15px;
16 
    display: flex;
17 
    justify-content: flex-end;
18 
    width: 90px;
19 
    height: 180px;
20 
    -webkit-box-reflect: right;
21 
  }
22 
  div>div {
23 
    border-left: 30px solid #998235;
24 
    border-bottom: 30px solid #998235;
25 
    height: 120px;
26 
    width: 30px;
27 
  }
28 
  dt {
29 
    background: linear-gradient(#1A4341 30px, #998235 0 60px, #1A4341 30px);
30 
    border-right: 15px solid #F3AC3C;
31 
    height: 90px;
32 
    width: 120px;
33 
    -webkit-box-reflect: right;
34 
  }
35 
</style>
36
Finally I had a puzzle where I could use -webkit-box-reflect. I now know that it doesn't span a size, so centering something is not as easy, if you want the reflection to be counted as well. I used selectors instead of classes and ids this time, just to not having to name the boxes.
< Back to Frontend Friday Folks Index