HTML Polygon for Vue 3

HTML Polygon is a polygon element generator for the following web frameworks:

• React
• Vue 3 ← this package

Visit the playground and complete documentation at the HTML Polygon website.

Install

# NPM
npm install @html-polygon/vue

# Yarn
yarn add @html-polygon/vue

# PNPM
pnpm add @html-polygon/vue

Quick start

Import the component:

import { Polygon } from '@html-polygon/vue'

Use the component:

<Polygon
  sides="5"
  :style="{
    height: '300px',
    width: '300px',
  }"
>
  I have 5 sides.
</Polygon>

Complete documentation can be found at the HTML Polygon website.

Why?

There are lots of polygon building utilities out there. They all generate either embedded SVGs, or they use CSS clip paths to clip the shape of standard divs.

The thing they all have in common is their inability to reliably contain text that "flows" into the shape to fill the polygon.

This is where HTML Polygon differs. This component builds an HTML element that both looks like a polygon, and behaves like a polygon.

You can use HTML Polygen to emulate the effects of the proposed CSS Shapes property shape-inside.