JSFiddle - React, Tailwind, and code Playground

Animated Clip Path, not automatically made however.

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{
  color:#fff;
  --block-color-hue:44.2;
  --block-color-sat:100%;
  --block-color-light:50%;
  --block-color-alpha:1;
  background-color:hsla(var(--block-color-hue),var(--block-color-sat),var(--block-color-light),var(--block-color-alpha));
  line-height:26px;
  padding:4px 10px;
  box-sizing:border-box;
  display:inline-block;
  
    transition-property:background-color, clip-path, color;
  transition-duration:1s, 0.5s, 1s;
  transition-timing-function:ease-in-out, linear, ease-in-out;
  transition-delay:0s;
}

.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)...

JavaScript

/* TODO: add a parser that automatically pushes the clip path to the nearest corner */
let clipPath = getComputedStyle(document.querySelector('.inline-element') /*, [pseudoElementName]*/ )['clip-path'];
/* console.log("clipPath:", clipPath); */
if(clipPath.indexOf('polygon') > -1){
  let clipPathPoints = clipPath.slice(8,-1).split(',');
  console.log(clipPathPoints);
/*  TODO: Now loop through and look for calcs higher */ 
/* FIXME: Actually! This should be part of the SVG Path Parser so that it can use the 9 slice information to move the points to walls (or corners) too */
}