Mountains - Pure CSS

In this example below you will see how to do a Mountains - Pure CSS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 12E3C3, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 12E3C3 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mountains - Pure CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="background">
  <section class="mountain-one">
    <section class="mountain-cap-one">
    </section>
    <section class="mountain-cap-four">
    </section>
  </section>
  <section class="mountain-two">
    <section class="mountain-cap-one">
    </section>
    <section class="mountain-cap-two">
    </section>
    <section class="mountain-cap-four">
    </section>
  </section>
  <section class="mountain-three">
    <section class="mountain-cap-two">
    </section>
    <section class="mountain-cap-three">  
    </section>
  </section>
  <section class="mountain-four">
    <section class="mountain-cap-two">
    </section>
    <section class="mountain-cap-one">
    </section>
  </section>
  <section class="sun"></section>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/12E3C3/mountains-pure-css-bqJgNP */
.background {
  position: relative;
  background-color: #c0dbf9;
  margin: auto;
  height: 100vh;
  width: 80vw;
}

.mountain-one, .mountain-two, .mountain-three, .mountain-four {
  position: absolute;
  bottom: 0;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

.mountain-one {
  background-color: #403c20;
  height: 40%;
  width: 50%;
  left: 10%;
  z-index: 3;
}

.mountain-two {
  background-color: #5c5735;
  height: 40%;
  width: 50%;
  opacity: 0.9;
  z-index: 2;
}

.mountain-three {
  background-color: #948f72;
  height: 70%;
  width: 80%;
  z-index: 1;
  opacity: 0.8;
}

.mountain-four {
  background-color: #5c5735;
  height: 20%;
  width: 50%;
  left: 50%;
  z-index: 2;
}

.mountain-cap-one {
  position: absolute;
  bottom: 80%;
  left: 32%;
  height: 80%;
  width: 40%;
  background-color: beige;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.mountain-cap-two {
  position: absolute;
  bottom: 70%;
  left: 27%;
  height: 70%;
  width: 40%;
  background-color: beige;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.mountain-cap-three {
  position: absolute;
  bottom: 70%;
  left: 35%;
  height: 40%;
  width: 40%;
  background-color: beige;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.mountain-cap-four {
  position: absolute;
  bottom: 62%;
  left: 10%;
  height: 80%;
  width: 60%;
  background-color: beige;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.sun {
  position: absolute;
  background-color: yellow;
  height: 20%;
  width: 15%;
  bottom: 70%;
  left: 78%;
  -web-kit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -web-kit-box-shadow: 0px 0px 100px white;
  -moz-box-shadow: 0px 0px 100px white;
  box-shadow: 0px 0px 100px white;
}

Comments