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

Question

[Satimof]

как можно сверстать такую кнопку? Скосы углов это диагональ квадрата 15x15 px, закругление 10px

Comments

[Ankhena]

В целом, ответ про гугл верный. Обсуждалось уже даже не сотни раз, а тысячи только на этом ресурсе.

- clip-path подходит для любого фона
- просто svg (инлайном, как фон, маска, как псевдо..)
- кусочки фона либо псевдо с серыми (в цвет фона) детальками для однородного фона
- различные комбинации линейных и радиальных градиентов

[Satimof]

Ankhena, то есть такого скругления можно добиться градиентами, верно понял?

[Ankhena]

Satimof, в данном случае я бы не стала

[Satimof]

Ankhena, основная проблема заключается в скруглении скошенных углов. Пробовал разные варианты, не помогало. Гуглил все, подобной ситуации не смог найти

[Ankhena]

Satimof, да вроде вариантов решения предостаточно.
Добавила ещё просто svg

[Максим]

скругления сделать на svg filter да и вообще всю кнопку собственно на самом svg ...

[godsplan]

Ankhena, вот я тоже видел много вопросов и много ваших ответов на такой вопрос, и даже я задавал такой вопрос, но можно же сделать кодпен и каждый раз его присылать. ВАши решения обычно не учитывают любую длинну или размер текста, clip-path не умеет скруглять углы, и есть еще очень много ньюансов в таких блоках.
Просто от вас примера учитывающего все ньюакнсы я никода не видел

[Ankhena]

godsplan,

но можно же сделать кодпен и каждый раз его присылать.

Можно. Сделайте и присылайте.

Конкретно эту кнопку я бы делала 2 или 3 вариантом и не вижу причин почему автор вопроса не мог бы экспортировать из макета нужные svg и расставить bgi самостоятельно.

Или переформулирую для вас, а не для автора: не вижу причин, почему бы мне было интересно делать это за автора.

clip-path не умеет скруглять углы

https://developer.mozilla.org/en-US/docs/Web/CSS/c...

[Ivan Ustûžanin]

как вариант: https://codepen.io/Ivan-U7n/pen/VwoGvGr но там js сглаживает углы полигона
ну или дождаться когда shape() обретёт поддержку

[godsplan]

Ankhena,
2 вариант: "просто" свг не учитывает вариант где кнопка зависит от размера контента, либо это просо не указано в комменте, да и сам вариант "просто свг" может под собой подрузмевать что угодно. Последний раз когда я делал подобные фигуры на свг, то мне приходилось учитывать масштабирование и там были какие то формулы, что-то еще, я делал по какой то статье, которую сейчас уже не смог найти, но это было едиственно решение которое мне помогло.
3. Псевдо в цвет фона тоже не универсальное решение так как зависит от фона

Я понимаю что все это не учтено в вопросе. но каждый раз когда я встречаю подобный вопрос я думаю именно об этом, понятно что есть решения проще/костыльнее/лишь бы работало, но по факту задачу грамотно они нникак не решают, а примеров нет, ничего нет, есть просто ответ "ну просто свг или просто clip-path", и так из раза в раз, хотя если человек это спрашивает, то есть шанс что он уже это попробовал (опять же не указано в вопросе да, но все равно)

Конкретно решение с clip-path:
Может я ошибаюсь и уже забыл конечно, но оно тоже не позволяет масштабировать блок и обрезки clip-path в зависимости от размера контента, и либо углы уедут и поменяют свой угол либо что-то еще.

Опять же без негатива, я ничего не предъявляю или что-то еще, но просто мой взгляд.

[Ankhena]

godsplan, да, всё верно. Универсального, адаптивного некостыльного, без js и не полностью svg, решения на данный момент нет.

Что бы я делала конкретно в этом случае, написала выше. Это будет и бескостыльно и адаптивно и может зависеть от размера шрифта или размеров блока или от чего угодно (опять таки в рамках этого скрина).

Там кстати и скругления больше похожи на супер эллипс, а не просто радиус. Но можно и ошибиться без фигмы.

[Ivan Ustûžanin]

godsplan, Ankhena правильно говорит, конкретно в этом случае можно, например, использовать border-image (добавил ответ с ним), но это не универсальное решение, т.к. для не однотонной кнопки скорее всего не подойдёт

[Ankhena]

Ivan Ustûžanin, я имела в виду более тупой вариант, через обычный множественный фон. Но можно и через border-image, картинок меньше.

Answer 1

[Ivan Ustûžanin]

конкретно с этим примером можно использовать border-image:

использованная картинка

Answer 2

[Mors Clamor]

в гугле забанили?

Comments

[Satimof]

Спасибо, но данное решение не подходит

[Mors Clamor]

Satimof, с какой стати

[Satimof]

Mors Clamor, Левый верхний и правый нижний углы скошены и закруглены, а не просто закруглены. Я пробовал предложенное вами решение в самом начале, не подходит

[Ankhena]

Mors Clamor,

с какой стати

А с какой стати должно было подойти?

[Mors Clamor]

Satimof, Ankhena, сори, невнимательный. css polygon

Answer 3

[izvenyaisya]

Как по мне, можно заморочиться, чтобы иметь полный контроль, и видоизменять без фигмы той же.
Есть три статьи как пользоваться свойством shape, та же SVG разметка, но более понятным языком, чем-то похоже на clip-path, но поддерживает кривые, как раз о них в третьей части статьи
https://css-tricks.com/better-css-shapes-using-sha...
https://css-tricks.com/better-css-shapes-using-sha...
https://css-tricks.com/better-css-shapes-using-sha...

Comments

[Ivan Ustûžanin]

только поддержка у shape() оставляет желать лучшего: https://caniuse.com/?search=shape()
а так да, как поддержка будет норм, много чего можно будет делать с её помощью и calc()

[izvenyaisya]

Ivan Ustûžanin, из интересного, пользуюсь на телефоне Firefox (android), сегодня тестировал, все работает) никакие конфиги не настраивал

[izvenyaisya]

izvenyaisya, извиняюсь, ошибся, видимо браузер телеграмма использовался, поэтому работало. Так что да, надо ждать поддержку лисы, думаю до конца лета доделают