HTML Polygonfor React and Vue 3

HTML Polygon with Tailwind CSS

Passing Tailwind CSS class names

The React component can be passed a standard className property and the Vue 3 component accepts Vue’s standard element class property which will be applied to the main polygon shape, but there are some caveats and limitiations to the styling that is possible.

Margin

Adding a margin via CSS will work as expected, so should you use that or the margin property of the component? The margin property of the component applies a synthetic margin inside the polygon’s containing box, leaving the box itself unaffected. This allows for a polygon to be resized without affecting the surrounding layout. You will usually want to use a CSS margin unless you intend to dynamically resize the polygon shape.

Padding

Padding applied via CSS will not conform to the shape of the polygon, you should use the padding property of the component to achieve padding that does conform.

Border

The border on the polygon shape is synthetically produced by overlaying another clipped div onto the main polygon shape. CSS border properties applied to the root polygon component will not affect this border and will usually have undesirable effects. To achieve basic width and color effects you should use the provided borderWidth and borderColor properties of the component instead.

The React component exposes the borderClassName property and the Vue 3 component exposes the borderClass property to give you some control over the border element CSS. Using this you can do things like apply a gradient effect to the border by specifying a gradient background on the div that is used to generate the border.

Box shadows and outlines

These will generally not work as expected, or not work at all due to the effects of shape clipping on the polygon.

Other attributes, animations, etc.

All other CSS should be honoured by the component as if it were a normal div element.

Example

This is an example of applying Tailwind CSS classes to an instance of the Polygon component in React. Conversion to Vue 3 is trivial, replacing the className and borderClassName properties with the Vue specific equivalent properties, class and borderClass.

<Polygon
  sides={7}
  rotate={10}
  padding={1}
  className='h-64 w-64 bg-blue-200 bg-[url('/images/palm-tree.svg')] bg-[length:75%_75%] bg-bottom bg-no-repeat text-center text-lg font-medium text-blue-800'
  borderWidth={10}
  borderClassName='bg-gradient-to-b from-purple-500 to-orange-500'
>
  Cocktails and Dreams&hellip;
  <br />I see it in{' '}
  <span className='block text-3xl font-extrabold text-pink-500 underline underline-offset-2'>
    pink neon
  </span>
</Polygon>