polycon
Create polygonal container.
Demo and Description
Usage
ES module
; const polycon = document;
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
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 --> 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. <!-- mediaquery --> 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.
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.
[[[
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.