Getting started

Browser

<script src="polycon.min.js"></script>
<script>
polycon('selector');
</script>

Node.js (with Webpack, Browserify and Rollup etc...)

import Polycon from 'polycon';

new Polycon(document.querySelector('selector'));

Markup

<div data-points="[coordinates for each apexes]" >...</div>

The data-points attribute defines the x and y coordinates for each apexes of the polygon.

Separate the x and y by a comma, each apexes by spaces. x1,y1 x2,y2 x3,y3...

Numeric value without unit (0, 300) is absolute pixel. Numeric value with percent (30%, 98%) is relative value. Numeric value with alphabet and symbol (w-30,h+30) is offset number.

Usable with media queries. @media [mediaQueryString] { [coordinates for each apexes] } ...

Standard

MediaQuery

Background Image

Fork me on GitHub