body {font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, HelveticaNeue, Helvetica, Arial, sans-serif; font-size:1em;}

div {text-align:center;}
label {font-size:1.25em;user-select:none;}

input[type=checkbox] {
appearance: none;
position: relative;
width: 2em;
height: 2em;
border: .125em solid #333;
font: inherit; vertical-align:middle;
font-size:1.25em;
}

input[type=checkbox]:before,
input[type=checkbox]:after {
content: "";
position: absolute;
background: green;
width: .25em;
}

input[type=checkbox]:before {
height: 45%;
top: 46%;
left: 22%;
border-bottom-left-radius: 0;
transform: scale(0) rotate(-32deg);
transform-origin: top left;
}

input[type=checkbox]:after {
height: 100%;
left: 42%;
top: -18%;
transform: scale(0) rotate(35deg);
transform-origin: bottom left;
}

input[type=checkbox]:before,
input[type=checkbox]:after {
transition: transform 0s;
}

input[type=checkbox]:checked:before {
transform: scale(1) rotate(-32deg);
}

input[type=checkbox]:checked:after {
transform: scale(1) rotate(35deg);
}

input[type=checkbox]:checked:before {
transition: transform .15s;
transition-delay: 0s;
}

input[type=checkbox]:checked:after {
transition: transform .25s;
transition-delay: .15s;
}