@marki1404

Как реализовать данную кнопку?

Добрый вечер! У меня возникли проблемы с реализацией одной кнопки, помогите пожалуйста стилизовать ее:
5e49c43ee130e681343933.png
Пробовал через before и after, но при уменьшении текста, они начинали сильно смещаться.
  • Вопрос задан
  • 176 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
С помощью clip-path:



Второй вариант, тоже с помощью clip-path, но другой подход:



Третий вариант, в качестве фона кнопки - svg изображение:

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Можно через transform для псевдоэлементов. Для достижения нужного наклона просто поиграться со значением skew.



Просто нужно держать в голове, что ширина псевдоэлементов должна быть равна углу наклона, а марджин половине этого значения (например,
width: 30%; transform: skewX(30deg); margin-left: -15%;
).
Ответ написан
Ваш ответ на вопрос

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

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