Getting started with HTML Polygon

What is this package?

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.

Do you need this package?

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.

Installation for your JavaScript framework

Follow the installation instructions on the framework specific documentation. You can choose between React and Vue.

Tailwind CSS

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.