Уважаемые знатоки, как сделать такую кнопку?

Question

[SobolevVladimir]

Сначала я попробовал просто тупо вырезать из макета эту кнопку и дать кнопке background-image с ней, но на маленьких разрешениях этих краёв вообще не видно. Подскажите, пожалуйста,- как сделать такую кнопку не картинкой, а стилями. Заранее спасибо Вам.

Comments

[Максим Тимофеев]

Каждый раз когда возникает вопрос "С..ка, как же это сверстать" - есть 95% вероятность, что ответ svg. Поэтому сразу после азбуки, надо начинать читать мануалы по svg.

[Максим]

Максим Тимофеев, можно и на css заморочится .... но на SVG проще

[Андрей]

Максим Тимофеев, по SVG спецификация в 2 раза толще чем по HTML ))) Не всякий потянет.

[Максим Тимофеев]

Андрей, Ну если брать базис, то там не много. Вот например, хороший материал для старта:
https://www.w3schools.com/graphics/svg_intro.asp
А так конечно тема объемная, а возможности и области применения безграничные

[alex-1917]

Максим Тимофеев, ага, хороший совет!!)) я недавно одно такое сайто-поделие переделывал, где ВСЕ иконки и мелкие картинки на svg были сделаны. Разжуй, в чем преимущество, если банальная иконка 16х16 весит 1кБ, а она же в svg ровно 50кБ кода??!! Эту иконку не надо масштабировать! Её не надо перекрашивать каждый день! Спрайты тоже не чужое слово. Короче говоря, 1,2 Мб (!!) кода svg было заменено на 34кБ png-спрайта!!!
Вопрос не политический, поверь, я не луддит и не противник бородатых хипстеров (это же их тема - модно и тренд))), НО заказчик рвал и метал, когда на айпадах клиентов его сайт ворочался как гиппопотам!!! Не буду выкладывать 6-этажный мат в сторону того самого горе-программера-модника)))

[Максим Тимофеев]

Разжуй, в чем преимущество, если банальная иконка 16х16 весит 1кБ, а она же в svg ровно 50кБ кода??!!

В том что svg иконку можно перекрашивать через css, увеличивать размер без потери качества, анимировать, использовать как маску и т.д. Соответственно если она использовалась просто как картинка - 1 раз в одном цвете, то правильным решением был бы спрайт.
Тут еще надо бы глянуть на код, думаю после оптимизации 50кБ превратятся в 10 и там уже смысл будет более очевиден.
Всегда кривые руки вносят коррективы и виною именно руки, а не технологии, которые этими руками использовались.

Короче говоря, 1,2 Мб (!!) кода svg было заменено на 34кБ png-спрайта!!!

А при чем тут svg?

Answer 1

[Максим]

svg - https://codepen.io/topicstarter/pen/jxYEdB?editors=1010

Comments

[Игорь Забродин]

С svg и правда проще https://codepen.io/Rapt0p7/pen/GdYzME

[Максим]

Игорь Забродин, на SVG проще на много

Answer 2

[Влад]

Можно воспользоваться псевдо-классами :before и :after.

Answer 3

[alex-1917]

Автор, не забывай тестировать на моб. устройствах, надеюсь ты уже читал про открытое письмо разработчикам от Гугла про 18 июня)))
Как отписал выше в комментах, этот ваш модный svg невероятно грузит айпады и айфоны. Привет, выдача топ-1000, прощай, выдача топ10...
Ну и не забывай периодически похлопывать дизайнера ребром ладошки да по затылочку, эти смешные закругления в 99% не описаны в ТЗ, это личная прихоть дизайнера...