<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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.