Прилетела тут интересная задачка от диза. Можно вставить svg, но зачем, если можно использовать код.
Как я вижу это в своей голове?
Необходимо сделать круг с полосатым бордером и прозрачными проплешинами. Фон цветной, поэтому в центре необходимо сделать дырку.
Этапы осознания:
1. Что мы имеем:
· внешний круг 347px*347px,
· внутренний круг 310px*310px + обводка каждого из кругов.
· нужно учесть, что размер блока при наведении чуть больше (368px*368px)
Но самое главное:
«Как сделать чертову дырку?!?! Подумаю об этом потом…»
2. Первое, что приходит на ум сделать такой фон с помощью repeating-conic-gradient
3. Если бы внутри не нужен был прозрачный фон, то можно просто внутри создать блок с нужной шириной и закрасить под цвет фона, получится такое.
«Если ничего не придумаю – сойдет и так»
- думала я, но продолжала искать.
4. Нашла! Чудесное свойство маска.
-webkit-mask-image: radial-gradient(156px, transparent 98%, #000);
mask-image: radial-gradient(156px, transparent 98%, #000);
где 156px – (ширина внутреннего круга/2)+1px бордера.
Что за цвет #000 и зачем он я не разобралась, но работает и ладно😊
Это была основная проблемка в этой задачке, сделать остальные ховеры не составило труда.