shapes

index.html

<div class="container">
  <div class="five animated infinite flash"></div>
  <div class="heart animated infinite pulse"></div>
  <div class="triContainer">
  <div class="topTriangles">
  <div class="one animated infinite fadeIn"></div>
  <div class="two animated infinite fadeIn"></div>
  <div class="three animated infinite fadeIn"></div>
  </div>
  <div class="bottomTriangles">
    <div class="four"></div>
  </div>
  </div>
</div>  

shapes.markdown

shapes

css shapes and animations

A Pen by Marianne Kelly on CodePen.

License.

style.css

.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
   margin-top: 100px;
    
}
.five {
  width: 0;
  height: 0;
  border-left: solid 100px transparent;
   border-right: solid 100px transparent;
   border-bottom: solid 70px yellow;
  transform: rotatez(35deg);  
  animation-duration: 7s;
}
.five:before {
  position: absolute;
  display: block;
  content: '';
   width: 0;
  height: 0;
  top: -45px;
  left: -65px;
  border-left: solid 30px transparent;
   border-right: solid 30px transparent;
   border-bottom: solid 80px yellow;
  transform: rotatez(-35deg);    
}
.five:after {
   position: absolute;
  display: block;
  content: '';
   width: 0;
  height: 0;
  top: 3px;
  left: -105px;
  border-left: solid 100px transparent;
   border-right: solid 100px transparent;
   border-bottom: solid 70px yellow;
  transform: rotatez(-70deg); 
}

.heart {
  position: relative;
  margin: 20px;
  height: 170px;
  width: 200px;
 
  }
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  width: 100px;
  height: 160px;
  top: 5px;
  background: red;
  border-radius: 50px 50px 0 0;
}

.heart:before {
  left:100px;
  
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  
  -webkit-transform-origin:0 100%;
  transform-origin:0 100%;
}

.heart:after {
  left:0;
  
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
  -webkit-transform-origin:100% 100%;
  transform-origin:100% 100%;
}

.triContainer{
  display: flex;
  flex-direction: column;
/*   margin: 0 auto; */
}

.topTriangles {
  display: flex;
}

.bottomTriangles {
  display: flex;
}

.one {
  width: 0;
  height: 0;
  border-right: solid 50px transparent;
   border-left: solid 50px transparent;
   border-bottom: solid 75px #64b5f6;
  animation-duration: 1s;
}

.two {
  margin-left: -50px;
  width: 0;
  height: 0;
  border-right: solid 50px transparent;
  border-left: solid 50px transparent;
  border-top: solid 75px #2196f3;
  animation-duration: 1s;
  animation-delay: .5s;
}

.three {
  margin-left: -50px;
  width: 0;
  height: 0;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
  border-bottom: solid 75px #1976d2;
  animation-duration: 2s;
  animation-delay: 1s;
}

.four {
  width: 0;
  height: 0;
  border-top: solid 100px #2196f3;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
  
}

@keyframes fadeIn {
 0% { opacity: .9;
    }
 100% { opacity: 1;   
      }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />