@NewUser4242

Как сделать такую маску, clip-path?

Есть блок, там 4 таких "круга" и на ховер они еще и растягиваются, + в них есть текст. Думаю сделать для каждого "круга" маску или clip-path но как? Вручную не охота, может есть генератор, где залить SVG/PNG?
Cам "круг"
spoiler
<svg width="396" height="400" viewBox="0 0 396 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M182.325 396H396V182.325C396 81.6271 314.373 0 213.675 0H189.837C84.95 0 0 84.95 0 189.837V213.675C0 314.373 81.6271 396 182.325 396Z" fill="purple"/>
</svg>

P/S если подскажете вариант реализации по-лучше буду благодарен
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Есть блок, там 4 таких "круга" и на ховер они еще и растягиваются, + в них есть текст. Думаю сделать для каждого "круга" маску или clip-path но как?


Для каждого блока задаёте Clip-Path, padding'ы чтобы текст не прилипал к краям, центрируете текст внутри блока. При наведении увеличиваете высоту/ширину или padding или играйте со свойством transform: scale(N). Profit.

Генератор Clip-Path из SVG.
Генератор базовых фигур и прочего - Clip-Path.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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