<div class="box" style="--path:50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%;--border:3px">Some text </div>
<div class="box" style="--path:50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%;--border:10px">some text </div>



<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/dyRMQXP.js');
}  else {
  alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>
@property --border{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

.box {
  --path:50% 0,100% 100%,0 100%;
  --border:5px;
  margin:5px 20px;
  width:200px;
  height:200px;
  cursor:pointer;
  display:inline-grid;
  place-content:center;
  position:relative;
  clip-path:polygon(var(--path));
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  -webkit-mask:paint(polygon-border);
  background:red;
}

body {
  background:pink;
}
registerPaint('polygon-border', class  {

  static get inputProperties() {
    return [
      '--path',
      '--border'
    ]
  }
  
  paint(ctx, size, properties) {

    const points = properties.get('--path').toString().split(',');
    const b = parseFloat(properties.get('--border').value);
    const w = size.width;
    const h = size.height;
    
    const cc = function(x,y) {
      var fx=0,fy=0;
      if (x.indexOf('%') > -1) {
        fx = (parseFloat(x)/100)*w;
      } else if(x.indexOf('px') > -1) {
        fx = parseFloat(x);
      }
      if (y.indexOf('%') > -1) {
        fy = (parseFloat(y)/100)*h;
      } else if(y.indexOf('px') > -1) {
        fy = parseFloat(y);
      }
      return [fx,fy];
    }
    
    var p = points[0].trim().split(" ");
    p = cc(p[0],p[1]);
    ctx.beginPath();
    ctx.moveTo(p[0],p[1]);
    
    for (var i = 1; i < points.length; i++) {
      p = points[i].trim().split(" ");
      p = cc(p[0],p[1]);
      ctx.lineTo(p[0],p[1]);
    }
    ctx.closePath();
    ctx.lineWidth = 2*b;
    ctx.strokeStyle = '#000';
    ctx.stroke();
  }

})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.