<div class="triangule"></div>

body{
  background-color: #eee;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.triangule{
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 200px;
  width: 200px;
  margin: 30px auto;
  transform-origin: center;
  background-color:white;
  position: relative;
  animation: animate1 ease both 2s;
  &:before{
    content:'';
    display:block;
    width: 100%;
    transform-origin: top right;
    right:0;
    bottom:-70px;
    background-color: rgba(0,0,0,.1);
    height: 70px;
    position: absolute;
    transform: rotate(0deg);
    animation-delay: 1.3s;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1) inset;
    animation: animate2 2s ease both;
  }
  &:after{
    content:'';
    display:block;
    width: 100%;
    right:0;
    bottom:-130px;
    background-color: rgba(0,0,0,.3);
    height: 130px;
    position: absolute;
    transform-origin: top right;
    transform: rotate(0deg);
    animation-delay: 1s;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1) inset;
    animation: animate3 2s ease both;
  }
}
@keyframes animate1{
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes animate2{
  0%{
    opacity:0;
    transform: rotate(0deg);
  }
  100%{
    opacity:1;
    transform: rotate(20deg);
  }
}
@keyframes animate3{
  0%{
    opacity:0;
    transform: rotate(0deg);
  }
  100%{
    opacity:1;
    transform: rotate(40deg);
  }
}