HTML Polygon allows you to generate HTML elements that look like regular polygons. These elements can contain text and regular HTML elements that will “flow” inside the polygon. It emulates some of the functionality of the CSS draft specification for the shape-inside
property, but it is limited to regular polygon shapes.
To better understand the capabilities and limitations of HTML Polygon, visit the Play section and test the various options.
This package is best used in a situation where you need text and other inline elements to flow inside a polygon and comform to the shape of the polygon. If you just want a polygon shape for decoration, you probably just want to use a basic clip-path
on an HTML element. You can generate a basic polygon clip-path
on this site, and copy the HTML into your code. The other option is to use a basic SVG.
Follow the installation instructions on the framework specific documentation. You can choose between React and Vue.
If you are using Tailwind CSS as well, then also take a look at the Tailwind CSS documentation, which will help with common usage and explain some of the unexpected behaviour you might enocunter along the way.