Polycon
Create polygonal container.
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] } ...