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

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/