Polycon

使い方

ブラウザ

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

WebpackやBrowserify、Rollupなどの場合

import Polycon from 'polycon';

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

マークアップ

<div data-points="[頂点座標]" >...</div>

data-points 属性に多角形の頂点のx,y座標を記述して下さい。

xとyの間はカンマ区切り, 各頂点はスペース区切りになります。 x1,y1 x2,y2 x3,y3...

単位なし数値(0, 300)は絶対値のピクセル数を表します。パーセント付き数値(30%, 98%)は、xの場合は高さ、yの場合は幅からの相対値を表します。アルファベットとプラス・マイナス付きの数値(w-30,h+30)は、xの場合高さから、yの場合幅からのオフセット値となります。

メディアクエリでレスポンシブな変更もできます。 @media [メディアクエリ] { [頂点座標] } ...