How to draw hexagon with CSS?

Question

I want to create a hexagon-form component, the hexagon would change its CSS characteristics on the next events: select , hover etc.

I tried to use a clip-path and :after and :before . But unsuccessful.

Here is an example of a component:

Answer 1

With complex shapes like this, in my opinion its better to just save this out as an SVG image and convert it to a react component using https://react-svgr.com/ -- as opposed to complicated CSS hacks. Since SVG images are just plain text HTML elements on the inside (as opposed to png etc where its just binary image data) it means you can have the CSS change on hover/select etc via props or plain old CSS styling.