Making soft edged triangle animation

Question

Trying to make soft edged triangle animation, but couldn't make the triangle edges perfectly bended softly.

As a output I am trying to make this. triangly animation

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px 0 0;
}
.shape{
    border-radius:10px 0 0;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

<div class="triangle">
  <div class="shape"></div>
</div>

Answer 1

For this you will need to learn svg and svg animations, you can find some free icons from here http://svgicons.sparkk.fr/

svg{
  width: 3em;
  height: 3em;
  display: inline-block;
}

<svg clas="svg-icon" viewBox="0 0 20 20">
  <path d="M 14.5 4
           l 4.5 8.4
           s 2.6 6 -3.64 6.44
           l -11 0
           s -6.56 -.28 -3.48 -6.52
           l 4.52 -8.4
           s 4.5 -8 9 0
           z"
        fill="cornflowerblue">
</svg>

<svg class="svg-icon" id="like" viewBox="0 0 20 20">
    <path d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61" fill="cornflowerblue"></path>
</svg>