JSFiddle - React, Tailwind, and code Playground

Attempting to animate clip paths

by nilloc

HTML

<div class="shadow-outline"><div class="number inline-element"><div class='content'>number-</div></div></div>

CSS

body{
  background-color:white;
}

.inline-element{
  background-color:hsla(44.2,100%,50%,1);
  line-height:26px;
  padding:4px 10px;
  box-sizing:border-box;
  display:inline-block;
}

.number{
  -webkit-clip-path: polygon(7.50px 2px,calc(100% - 7.50px) 2px,calc(100% - 7.50px) 2px,calc(100% - 6.68px) 2.06px,calc(100% - 5.87px) 2.25px,calc(100% - 5.11px) 2.56px,calc(100% - 4.40px) 2.99px,calc(100% - 3.75px) 11.67%,calc(100% - 3.18px) 13.67%,calc(100% - 2.67px) 15.83%,calc(100% - 1.82px) 20.57%,calc(100% - 1.17px) 25.63%,calc(100% - 0.69px) 30.90%,calc(100% - 0.22px) 39%,calc(100% - 0.01px) 47.23%,calc(100% - 0.01px) 52.77%,calc(100% - 0.22px) 61%,calc(100% - 0.69px) 69.10%,calc(100% - 1.18px) 74.37%,calc(100% - 1.82px) 79.43%,calc(100% - 2.67px) 84.17%,calc(100% - 3.18px) 86.33%,calc(100% - 3.76px) 88.30%,calc(100% - 4.40px) calc(100% - 2.99px),calc(100% - 5.11px) calc(100% - 2.56px),calc(100% - 5.87px) calc(100% - 2.25px),calc(100% - 6.68px) calc(100% - 2.06px),calc(100% - 7.50px) calc(100% - 2px),7.50px calc(100% - 2px),7.50px calc(100% - 2px),6.68px calc(100% - 2.06px),5.87px calc(100% - 2.25px),5.11px calc(100% - 2.56px),4.40px calc(100% - 2.99px),3.76px 88.33%,3.18px 86.33%,2.67px 84.17%,1.82px 79.43%,1.17px 74.37%,0.69px 69.10%,0.22px 61%,0.01px 52.77%,0.01px 47.23%,0.22px 39%,0.69px 30.90%,1.17px 25.63%,1.82px 20.57%,2.67px 15.83%,3.18px 13.67%,3.76px 11.67%,4.40px 2.99px,5.11px 2.56px,5.87px 2.25px,6.68px 2.06px,7.50px 2px);
  clip-path: polygon(7.50px 2px,calc(100% - 7.50px) 2px,calc(100% - 7.50px) 2px,calc(100% - 6.68px) 2.06px,calc(100% - 5.87px) 2.25px,calc(100% - 5.11px) 2.56px,calc(100% - 4.40px) 2.99px,calc(100% - 3.75px) 11.67%,calc(100% - 3.18px) 13.67%,calc(100% - 2.67px) 15.83%,calc(100% - 1.82px) 20.57%,calc(100% - 1.17px) 25.63%,calc(100% - 0.69px) 30.90%,calc(100% - 0.22px) 39%,calc(100% - 0.01px) 47.23%,calc(100% - 0.01px) 52.77%,calc(100% - 0.22px) 61%,calc(100% - 0.69px) 69.10%,calc(100% - 1.18px) 74.37%,calc(100% - 1.82px)...