shape-poly

Make CSS Polygon Shape

• Polygons & Stars Demo

$ npm install shape-poly

Options

import {poly, be, dom} from "shape-poly";
 
interface PolyInterface {
  side?: number;
  split?: number;
  strokeWidth: number | string;
  className?: string;
  starRadius?: number; // inner-radius(0 ~ 100%)
  container?: HTMLElement;
  direction?: DIRECTION;
  stroke?: string; // color
}
 
function poly(options: PolyInterface);
function dom(el: HTMLElement);
function be(el: HTMLElement, options: PolyInterface);

How to Use

<script src="//daybrush.github.io/shape-poly/release/latest/shapepoly.min.js"></script>

<div class="triangle" data-side="5" data-stroke-width="11px" style="width: 100px"></div>

import {poly, be, dom} from "shape-poly";
 
// 10 star
const el = poly({starRadius: 50, side: 10, strokeWidth: "5px"});
 
document.body.appendChild(el);
 
// change 10 star to 5 polygon
be(el, {side: 5, strokeWidth: "5px"})
 
// data-side
// data-star-radius
// data-stroke-width
// data-stroke
// data-fill
// data-direction
dom(document.querySelector(".triangle"));