Как сверстать такой шестиугольник?

Подскажите, как можно сверстать такой шестиугольник:
Изначально выглядит вот так

5e788c8c38dc8748262370.png

А при ховере

5e788cc82f56b312623787.png

  1. Нужно что бы середина этого шестиугольника была прозрачная и была видна картинка на заднем фоне.
  2. Что бы при наведении круг плавно заполнял этот шестиугольник и не выходил за рамки.

Сначала подумал про clip-path, что бы обрезать круг, но тогда не получается сделать рамку.
Потом пробовал делать шестиугольник при помощи псевдоэлементов, рамка ок, но круг вылазит.
Как быть?
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
LenovoId
@LenovoId
грёбнный короновирус
Можно и на smil это сделать но на js проще
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы