CornerBox

CDN

<script src="https://cdn.jsdelivr.net/gh/jerosoler/cornerbox/CornerBox.js"></script>

NPM

npm install cornerbox

How to use

Javascript:

if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {
 CSS.registerProperty({
 name: '--cornerbox-width',
 syntax: '<length>',
 initialValue: '10px',
 inherits: false
 });
 CSS.registerProperty({
 name: '--cornerbox-length',
 syntax: '<length>',
 initialValue: '10px',
 inherits: false
 });
 CSS.registerProperty({
 name: '--cornerbox-color',
 syntax: '<color>',
 initialValue: '#ffffff',
 inherits: false
 });
 CSS.paintWorklet.addModule('CornerBox.js');
 } else {
 console.log("Not Supported");
 alert("Not Supported");
 }

CSS

div {
 --cornerbox-color:#1100fc;
 --cornerbox-width: 5px;
 --cornerbox-length: 15px;
 background-image: paint(cornerbox);
}