CornerBox

CSS Houdini library.

PLAY

CDN

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

NPM

npm install cornerbox

How to use

Download Cornerbox.js file.

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);
}