README

polycon

Create polygonal container.

Demo and Description

Usage

ES module

import Polycon from 'polycon';

const polycon = new Polycon(document.querySelector('.polycon'));

API

method	parameter	return
`new Polycon(element)`	element: `HTMLElement`	`Polycon`
`Polycon.new(selector)`	selector: `string`	`Array<Polycon>`
`Polycon.new(element)`	element: `HTMLElement`	`Polycon`
`Polycon.new(nodeList)`	nodeList: `NodeList<HTMLElement>`	`Array<Polycon>`

Browser

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

API

method	parameter	return
`polycon(selector)`	selector: `string`	`Array<Polycon>`
`polycon(element)`	element: `HTMLElement`	`Polycon`
`polycon(nodeList)`	nodeList: `NodeList<HTMLElement>`	`Array<Polycon>`

HTML Markup

<!-- basic -->
<div class="polycon" data-points="0,0 50%,50% w,0 w,h 0,h">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quis temporibus dicta illo magnam consequuntur quod tempora non dolorum, libero voluptas, aliquam ipsum quam eius quae error sequi, unde alias.</p>
</div>

<!-- mediaquery -->
<div class="polycon" data-points="
    @media default { 0,0 50%,50% w,0 w,h 0,h }
    @media (max-width: 640px) { 0,0 50%,90% w,0 w,h 0,h }
    @media (orientation: landscape) { 10,10 50%,50%, w-10,10 w-10,h-10 10,h-10 }">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia nesciunt vero voluptates natus? Accusamus assumenda rem consectetur. Ullam sapiente voluptatibus praesentium deleniti quae culpa ab consequatur perferendis iste quam.</p>
</div>

Required attributes

mame	value	description
`data-points`	flex points	`points` attribute value of the extended to the `<polygon>` svg elements so as to correspond to a relative value. 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] } ...`.

StyleSheet

Automatically define into <style> element.

[data-polycon-node="root"] {
    position: relative;
    background: none !important;
}
[data-polycon-node="root"] > * {
    position: relative;
    z-index: 1;
}
[data-polycon-node="root"] > [data-polycon-node="background"] {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

Support browsers

Chrome
Firefox
Edge
Safari 5.1+
Internet Explorer 9^† and 11
iOS Safari 8+
Android Browser 4.0+

†: IE9 is not support mediaQuery syntax because that was not support matchMedia API. Allways refrect default value in that syntax.

Usage no npm install needed!