Simple tree in CSS

March 19, 2020

npm

Simple Tree CSS

The tree is made up of a trunk and three "branches", which are positioned using position: absolute on a tree container.

1.<div class="tree">
2.    <div class="branch branch-1"></div>
3.    <div class="branch branch-2"></div>
4.    <div class="branch branch-3"></div>
5.    <div class="trunk"></div>
6.</div>

1..tree {
2.    height: 400px;
3.    width: 250px;
4.    position: relative;
5.}

Simple Tree Branchs

Each branch is green triangle with a wider base. The top triangle is the smallest with each successive triangle being larger than the last. Creating triangles in CSS is kind of a hack using CSS borders. We set don't set a height or width on the element but instead create large borders that overlap. By setting the left and right borders to transparent, we clip the bottom border into a triangle shape.

1..branch {
2.    position: absolute;
3.}
4.  
5..branch-1 {
6.    top: 50px;
7.    left: 43px;
8.    border-left: 80px solid transparent;
9.    border-right: 80px solid transparent;
10.    border-bottom: 120px solid #27ae60;
11.}
12.  
13..branch-2 {
14.    top: 80px;
15.    left: 23px;
16.    border-left: 100px solid transparent;
17.    border-right: 100px solid transparent;
18.    border-bottom: 160px solid #27ae60;
19.}
20..branch-3 {
21.    top: 130px;
22.    left: 0px;
23.    border-left: 125px solid transparent;
24.    border-right: 125px solid transparent;
25.    border-bottom: 200px solid #27ae60;
26.}

Simple Trunk

The trunk is just a rectangle positioned below the bottom "branch" and colored brown.

1..trunk {
2.    height: 70px;
3.    width: 50px;
4.    background: tan;
5.    position: absolute;
6.    bottom: 0;
7.    left: 100px;
8.}