https://github.com/jerosoler/cornerbox

🎨 CSS Houdini corner box
https://github.com/jerosoler/cornerbox

css css-houdini csshoudini houdini paintworklet

Last synced: 12 months ago
JSON representation

🎨 CSS Houdini corner box

• Host: GitHub
• URL: https://github.com/jerosoler/cornerbox
• Owner: jerosoler
• License: mit
• Created: 2021-02-14T20:05:52.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-02-18T19:41:07.000Z (over 5 years ago)
• Last Synced: 2025-04-06T16:11:57.782Z (about 1 year ago)
• Topics: css, css-houdini, csshoudini, houdini, paintworklet
• Language: HTML
• Homepage: https://jerosoler.github.io/cornerbox/
• Size: 41 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![GitHub license](https://img.shields.io/github/license/jerosoler/cornerbox)](https://github.com/jerosoler/cornerbox/blob/main/LICENSE)

# CornerBox 

CSS Houdini library. 

[PLAY](https://jerosoler.github.io/cornerbox/)

![Demo](https://github.com/jerosoler/cornerbox/raw/main/docs/cornerbox.png)

## CDN

```html

```

## NPM 

```bash

npm install cornerbox

```

## How to use

Download `Cornerbox.js` file.

### Javascript:

```javascript

if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {

            CSS.registerProperty({

                name: '--cornerbox-width',

                syntax: '',

                initialValue: '10px',

                inherits: false

            });

            CSS.registerProperty({

                name: '--cornerbox-length',

                syntax: '',

                initialValue: '10px',

                inherits: false

            });

            CSS.registerProperty({

                name: '--cornerbox-color',

                syntax: '',

                initialValue: '#ffffff',

                inherits: false

            });

            CSS.paintWorklet.addModule('CornerBox.js');

        } else {

            console.log("Not Supported");

            alert("Not Supported");

        }

```

### CSS 

```css

div {

    --cornerbox-color:#1100fc;

    --cornerbox-width: 5px;

    --cornerbox-length: 15px;

    background-image: paint(cornerbox);

}

```