How can I let a hexagon morph into a triangle (animation)

Question

I have a question on how I can morph a hexagon into a triangle. So the animation it starts off as a hexagon, it's transforms or morphs into a triangle which goes then back to the hexagon (infinite iteration)

 <div class="hexagon"></div>
       <div id="triangle-up"></div>
 <div id="triangle-down"></div>

My CSS code

.hexagon {
    position: relative;
    width: 130px;
    height: 75.06px;
    background-color: #2196F3;
    margin: 0 auto;
    margin-top: 50px;

}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 37.53px solid #2196F3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 37.53px solid #2196F3;
}


#triangle-up {
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-top: -86px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2196F3;
    animation: triangle-up_show;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-play-state: paused;

    animation-delay: 3s;
}



#triangle-down {
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-top: -100px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #2196F3;
    animation: triangle-down_show;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-play-state: paused;

}

@keyframes hexagon_hide {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes triangle-up_show {
    0%      { opacity: 0 }
    50%     { opacity: 1 }
    100%    { opacity: 0 }
}

@keyframes triangle-down_show {
    0%      { opacity: 0 }
    50%     { opacity: 1 }
    100%    { opacity: 0 }
}

Answer 1

In css this can be done with the polygon clip and animation:

.shape {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: red;
  width: 300px;
  height: 300px;
  animation: morph 2s infinite;
}
@keyframes morph {
     0% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
    50% {clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
    100% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
}

<div class="shape">

</div>

I find this site http://bennettfeely.com/clippy/ a good tool for morphing polygon clips in css

Answer 2

I'm aware this isn't css but this could be done using an svg animation:

<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon id="shape" class="hex">
    <animate
      dur="2.5s"
      repeatCount="indefinite"
      attributeName="points"
      values="300,150 225,280 75,280 0,150 75,20 225,20;
       300,20 150,280 150,280 0,20 75,20 225,20;
         300,20 150,280 150,280 0,20 75,20 225,20;
       300,150 225,280 75,280 0,150 75,20 225,20;
         300,150 225,280 75,280 0,150 75,20 225,20;"/>
  </polygon>
</svg>

I hope this helps anyway :)

https://css-tricks.com/svg-shape-morphing-works/