Как сверстать такую кнопку?

Доброго времени суток. Подскажите, пожалуйста, как верстают такие кнопки на чистом CSS?
5f651c02535da001592827.jpeg
  • Вопрос задан
  • 1033 просмотра
Решения вопроса 4
RAX7
@RAX7
Ответ написан
Комментировать
artzolin
@artzolin
php, WordPress разработка сайтов artzolin.ru
Вы можете реализовать подобное через border-radius, тут демо
Ответ написан
Gorky
@Gorky
Веб-разработчик
Скорее всего на вашем примере просто png картинка. В CSS сложное искривление с тенью под ним вроде бы нельзя сделать. Еще вариант - SVG, с ним в принципе возможно вообще все что угодно, например: https://codepen.io/leenalavanya/pen/aXMXvz
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Если фон одноцветный, разделите кнопку на геометрические примитивы и соберите из них.
Навскидку, здесь скругленный прямоугольник и треугольники. Как вариант — прямоугольник, треугольники и круги.
Есть еще варианты:
- нарисовать подложку градиентами на фоне прямоугольной кнопки
- использовать clip-path
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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