polycon

Create polygonal container.

Demo and Description

English | Japanese

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.

©YusukeHirao(@cloud10designs), MIT license.