Я хочу сделать шестиугольник, который имеет градиентную заливку границы, которая вращается.
Пример GIF:
Я попытался создать фигуру только с помощью CSS, но это не сработало, потому что теги :after
и :before
используют стили границ для создания фигуры, которых нет.
Я попытался использовать файл *.svg
и загрузить его как background-image
, но не смог изменить границу и добавить анимацию CSS для поворота границы.
Наконец я попытался вставить *.gif
, но у него были проблемы, такие как белый ореол вокруг формы. Мой фон темный, так что это было очень заметно.
Так каков наилучший способ вставить такую фигуру с указанной анимацией?
P.S. Встроенный SVG не вариант, так как я хочу просто вставить форму, например:
<div id='hex'></div>