JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='pie'>
    <li class='slice tr'><div class='slice-contents'></div></li>
    <li class='slice br'><div class='slice-contents'></div></li>
    <li class='slice bl'><div class='slice-contents'></div></li>
    <li class='slice tl'><div class='slice-contents'></div></li>
<ul>

CSS

.pie {
    position: relative;
    margin: 1em auto;
    border: dashed 1px;
    padding: 0;
    width: 32em; height: 32em;
    border-radius: 50%;
    list-style: none;
    background-image: url('http://lorempixel.com/output/animals-q-c-512-512-4.jpg');
}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%; 
}
.slice.tr {
    transform: rotate(0deg) skewY(-0deg);
}
.slice.br {
    transform: rotate(90deg) skewY(0deg);
}
.slice.bl {
    transform: rotate(180deg) skewY(0deg);
}
.slice.tl {
    transform: rotate(270deg) skewY(0deg);
}
.slice-contents {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    border-radius: 50%;
        background: lightblue;
}
.slice.tr .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.br .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.bl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.tl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}

JavaScript

updateClock();
function updateClock(){
    var dt = new Date();
	var time = (dt.getHours() * 60) + dt.getMinutes();//number of minutes since 00.00
    var timeToDegrees = time / 4;//1440 minutes in 24hours, 360 degrees in a circle. 1440 / 4 = 360
    
    if(timeToDegrees < 90){//deal with top right sector
        $('.slice.tr').css('transform: rotate('+timeToDegrees+'deg) skewY(-'+timeToDegrees+'deg)');
        $('.slice.tr .slice-contents').css('transform: skewY('+timeToDegrees+'deg)');
    }
    else if(timeToDegrees < 180){//deal with bottom right sector
        var localDeg = timeToDegrees - 90;
        $('.slice.tr').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform: skewY(90deg)');
        $('.slice.br').css('transform: rotate('+localDeg+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.br .slice-contents').css('transform: skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees < 270){//deal with bottom left sector
        var localDeg = timeToDegrees - 180;
        $('.slice.tr').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform: skewY(90deg)');
        $('.slice.br').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform: skewY(90deg)');
        $('.slice.bl').css('transform: rotate('+localDeg+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.bl .slice-contents').css('transform: skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees <= 360){//deal with top left sector
        var localDeg = timeToDegrees - 270;
        $('.slice.tr').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform: skewY(90deg)');
        $('.slice.br').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform: skewY(90deg)');
        $('.slice.bl').css('transform: rotate(90deg) skewY(-90deg)');
        $('.slice.bl...