SOURCE

var current=0;

<div class="container">
    <div class="path" onclick="this.style.transform= 'rotate('+(current+=90)+'deg)';"></div>
    <div class="wordBox"><span>我</span></div>
    <div class="wordBox"><span>不</span></div>
    <div class="wordBox"><span>❤</span></div>
    <div class="wordBox"><span>会</span></div>
    <div class="wordBox"><span>❤</span></div>
    <div class="wordBox"><span>更</span></div>
    <div class="wordBox"><span>很</span></div>
    <div class="wordBox"><span>要</span></div>
    <div class="wordBox"><span>爱</span></div>
    <div class="wordBox"><span>心</span></div>
    <div class="wordBox"><span>离</span></div>
    <div class="wordBox"><span>❤</span></div>
    <div class="wordBox"><span>开</span></div>
    <div class="wordBox"><span>❤</span></div>
    <div class="wordBox"><span>心</span></div>
    <div class="wordBox"><span>你</span></div>
</div>

.container {
            display: flex;
            flex-wrap: wrap;
            height: 400px;
            width: 400px;
            position: relative;
        }
        .wordBox {
            flex: 0 0 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lawngreen;
        }
        .path {
            width: 100%;
            height: 100%;
            background-color: #00B0F0;
            position: absolute;
            -webkit-clip-path: polygon(25% 0,75% 0,75% 25%,50% 25%,50% 50%,75% 50%,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,0 100%,0 75%,25% 75%,25% 50%,0 50%,0 25%,25% 25%);
            transition: transform 2s;
        }