title: How to draw hexagon with CSS?
body: <p>I want to create a hexagon-form component, the hexagon would change its CSS characteristics on the next events: <code>select</code>, <code>hover</code> etc.</p>
  <p>I tried to use a <code>clip-path</code> and <code>:after</code> and <code>:before</code>. But unsuccessful.</p>
  <p>Here is an example of a component:</p>
  <p><a href="https://i.stack.imgur.com/FXmn6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FXmn6.png" alt="enter image description here" /></a></p>