Как такие вещи верстаются?

Question

[Андрей]

Т.е есть дизайн, стиль сайта состоит из множества кнопок и блоков вот такого плана

Обрезать можно через clip-path, но проблема остается с закруглениями
border radius на местах среза не действует, так же сам border задавать бесполезно, на местах среза он так же не действует
svg не вариант, т.к на сайте будет очень много таких блоков, которые будут иметь разную высоту, ширину и пр.

Answer 1

[Виктор Кожухарь]

Используем clip-path и много-много CSS-переменных

Answer 2

[Ankhena]

Не всюду пока поддерживается, но очень удобно corner-shape
Там где не поддерживается, можно оставить обычные скругления или не скруглять.

Но разумеется, зависит от ТЗ, можно ли так поступить (я бы постаралась уговорить). Если нет, то по-старинке, вариантов много: svg, clip-path, псевдо, градиенты и т.д.

Comments

[Сергей delphinpro]

не всюду - это мягко сказано =) оно пока еще вообще нигде не поддерживается.

[Ankhena]

Сергей delphinpro, у меня уже 139 хром - всё показывает ;)
Пока сайт сверстают, хромы обновятся.
С остальными да, надо решать как быть.

Я что-то так, по-детски чисто, радуюсь с этого свойства, как когда бордер-радиус завезли.

Answer 3

[Su-pr007]

Почитайте про border-image. С ним должно быть проще всего