CSS instead of svg Shapes Animations

For Exampple, CSS instead of svg Shapes on hover...

Demo

HTML

<div class="arrow-shape"></div>

CSS

<style>
        .arrow-shape {
            -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
                    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
            background: #037cd5;
            width: 240px;
            height: 240px;
            -webkit-transition: all 2s ease;
            transition: all 2s ease;
        }
        .arrow-shape:hover {
            -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
                    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
            background: #fdd921;
        }
</style>