A Simple Tree in CSS

March 21, 2020

Simple Tree CSS

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

<div class="tree">
  <div class="branch branch-1"></div>
  <div class="branch branch-2"></div>
  <div class="branch branch-3"></div>
  <div class="trunk"></div>
</div>
.tree {
  height: 400px;
  width: 250px;
  position: relative;
}

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.

.branch {
  position: absolute;
}

.branch-1 {
  top: 50px;
  left: 43px;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 120px solid #27ae60;
}

.branch-2 {
  top: 80px;
  left: 23px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 160px solid #27ae60;
}
.branch-3 {
  top: 130px;
  left: 0px;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-bottom: 200px solid #27ae60;
}

Simple Trunk

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

.trunk {
  height: 70px;
  width: 50px;
  background: tan;
  position: absolute;
  bottom: 0;
  left: 100px;
}