<div class="container-position">
  <div class="rectangle-bg-1 rectangle-position"></div>
  <div class="rectangle-bg-2 rectangle-position"></div>
  <div class="rectangle-bg-3 rectangle-position"></div>
  <div class="rectangle-bg-4 rectangle-position"></div>
  <div class="rectangle-bg-5 rectangle-position"></div>
  <div class="shapes-container rectangle-position">
    <div class="circle"></div>
    <div class="triangle shapes-triangles"></div>
    <div class="triangle-2 shapes-triangles"></div>
    <div class="triangle-3 shapes-triangles"></div>
    <div class="triangle-4 shapes-triangles"></div>
    <div class="triangle-5 shapes-triangles"></div>
    <div class="triangle-6 shapes-triangles"></div>
  </div>
</div>
*{
  box-sizing: border-box;
}
.container-position {
  /* Center horizontally*/
  display: flex;
  position: relative;
  flex-direction: column;
}
.rectangle-position{
  width: 540px;
  /* Center rectangles horizontally*/
  margin: 0 auto;
}
.rectangle-bg-1 {
  height: 336px;
  background: #f1dfc7;
}
.rectangle-bg-2 {
  height: 153px;
  background: #ecd3b4;
}
.rectangle-bg-3 {
  height: 30px;
  background: #e0c195;
}
.rectangle-bg-4 {
  height: 54px;
  background: #ecd3b4;
}
.rectangle-bg-5 {
  height: 87px;
  background: #e0c195;
}
/* triangles conatiner */
.shapes-container {
  display: flex;
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translate(-50%, 0);
  /*scale: 1.2;*/
}
.circle {
  width: 208px;
  height: 208px;
  background: #e9832f;
  border-radius: 50%;
  display: flex;
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, 0);
}
.shapes-triangles{
  display: flex;
  position: absolute;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
.triangle {
  /* big triangle*/
  width: 274px;
  height: 467px;
  background: #2da58c;
  opacity: 0.8;
  top: 200px;
  left: 50%;
  transform: translate(-50%, 0);
}
.triangle-2 {
  /* big light teal triangle*/
  width: 230px;
  height: 410px;
  background: #cad8bf;
  opacity: 0.8;
  top: 257px;
  left: 260px;
  z-index: 5;
}
.triangle-3 {
  /* small light teal triangle*/
  width: 172px;
  height: 322px;
  background: #cad8bf;
  opacity: 0.7;
  top: 345px;
  left: 80px;
  z-index: 3;
}
.triangle-4 {
  /* big dark green triangle*/
  width: 180px;
  height: 338px;
  background: #216e4e;
  opacity: 0.6;
  top: 329px;
  left: 0px;
  z-index: 2;
}
.triangle-5 {
  /* small dark green triangle*/
  width: 90px;
  height: 189px;
  background: #216e4e;
  opacity: 0.8;
  top: 477px;
  left: 290px;
  z-index: 4;
}
.triangle-6 {
  /* medium dark green triangle*/
  width: 146px;
  height: 289px;
  background: #216e4e;
  opacity: 0.6;
  top: 378px;
  left: 394px;
  z-index: 6;
}
/* Artwork reference: No mountains high enough Art Print by Picomodi - society6.com
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.