-1

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:

enter image description here

Iangyl
  • 69
  • 11
  • Does this answer your question? [Single div horizontal CSS hexagon button](https://stackoverflow.com/questions/14354087/single-div-horizontal-css-hexagon-button) – Steffen Sep 10 '22 at 21:16
  • 1
    https://css-tricks.com/the-shapes-of-css/#aa-hexagon-shape-via-aaron-hanson – Johannes Sep 10 '22 at 23:23

1 Answers1

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.

adsy
  • 8,531
  • 2
  • 20
  • 31
  • I got several similar answers with the same suggestions, and now I am more assured that It is correct to use SVG instead of drawing something in CSS. Because one of the main clauses was: is it correct to use SVG or professional front-end dev draw it manually – Iangyl Sep 11 '22 at 12:12