Inspired by Nicolas Raube's "Flat Forest", great for understanding
flexbox, borders, backgrounds and ::before & ::after pseudoelements

body or div holding the container and its contents{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 0;
  background: var(--bg-color);
}
.container {
  background: var(--container-color);
  width: 400px;
  height: 400px;
  border-radius: 100%;
  margin-top: 120px;
}

.sun {
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--sun-color);
  border-radius: 100%;
  margin-top: -100px;
  margin-left: 90px;
  box-shadow: 0 0 50px 20px var(--sun-light-color);
}

.mountain {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 200px 100px;
  border-color: transparent;
  border-bottom-color: var(--mountain-left-color); 
}
.mountain::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 200px 0;
  border-color: transparent;
  border-bottom-color: var(--mountain-right-color); 
}

.m_one {
  margin-top: -100px;
  margin-left: 70px;
  transform: scale(1.1);
}
.m_two {
  margin-top: -40px;
  margin-left: -1px;
  transform: scale(.8);
}
.m_three {
  margin-top: -50px;
  margin-left: 194px;
}
.m_four {
  margin-top: -80px;
  margin-left: 150px;
  transform: scale(.7);
}

.path {
  position: absolute;
  margin-top: 50px;
  margin-left: 150px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 300px 50px;
  border-color: transparent;
  border-bottom-color: var(--path-color);
}

.house {
  position: absolute;
  width: 200px;
  height: 150px;
  background: var(--house-color);
  border-bottom: 30px solid var(--house-bottom-color);
  margin-top: 70px;
  margin-left: 100px;
  transform: scale(.5);
}
.house:after {
  content: '';
  position: absolute;
  display: block;
  width: 60px;
  height: 40px;
  background: var(--house-window-color);
  margin-top: 45px;
  margin-left: 120px;
  border: 1px solid var(--house-window-border-color);
}

html: (chimney, roof and door nested)
<div class="house">
  <div class="chimney"></div>
  <div class="roof"></div>
  <div class="door"></div>
</div>

.chimney {
  content:'';
  position:absolute;
  display:block;
  background:var(--house-chimney-color);
  width:30px;
  height:70px;
  margin-top:-100px;
  margin-left:150px;
}

.roof {
  content:'';
  position:absolute;
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 120px 120px 120px;
  border-color:transparent;
  border-bottom-color:var(--house-roof-border-color)
  margin-left:-20px;
  margin-top:-120px;
}
.roof:after {
  content:'';
  position:absolute;
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 100px 100px 100px;
  border-color:transparent;
  border-bottom-color:var(--house-roof-color)
  margin-left:-100px;
  margin-top:21px;
}

.door {
  position:absolute;
  width:50px;
  height:120px;
  background:var(--house-door-color);
  margin-top:30px;
  margin-left:35px;
}
.door:after {
  content:'';
  position:absolute;
  display:block;
  width:10px;
  height:4px;
  background:var(--house-door-knob-color);
  margin-left:37px;
  margin-top:48px;
}

.tree {
  background:var(--tree-stem-color);
  position:absolute;
  width:15px;
  height:40px;
  font-size:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

the tree in the example also has
margin-top:150px;
margin-left:44px;
so it is a bit more off the edge.

.leaf {
display:flex;
margin-bottom:30px;
}
.leaf:before {
  content:'';
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 100px 50px;
  border-color:transparent;
  border-bottom-color:var(--tree-left-color);
  margin-top:-125px;
  margin-left:-43px;
}
.leaf:after {
  content:'';
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 50px 100px 0;
  border-color:transparent;
  border-bottom-color:var(--tree-right-color);
  margin-top:-125px;
}

html: (3 leaves nested)

<div class="tree">
  <div class="leaf"></div>
  <div class="leaf"></div>
  <div class="leaf"></div>
</div>

.t_one {
  margin-top:150px;
  margin-left:44px;
  transform:scale(.6);
}
.t_two {
  margin-top:170px;
  margin-left:350px;
  transform:scale(.6);
}
etc

html: 10 trees

<div class="tree t_one">
  <div class="leaf"></div>
  <div class="leaf"></div>
  <div class="leaf"></div>
</div>
<div class="tree t_two">
  <div class="leaf"></div>
  <div class="leaf"></div>
  <div class="leaf"></div>
</div>
etc

html:

<div class="container">

  <div class="sun"></div>
  
  <div class="mountain m_one"></div>
  <div class="mountain m_two"></div>
  <div class="mountain m_four"></div>
  <div class="mountain m_three"></div>
  
  <div class="path"></div>
  
  <div class="house">
    <div class="chimney"></div>
    <div class="roof"></div>
    <div class="door"></div>
  </div>
  
  <div class="tree t_one">
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
  </div>
  <div class="tree t_two">
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
  </div>
etc
</div>