Т.е есть дизайн, стиль сайта состоит из множества кнопок и блоков вот такого плана
Обрезать можно через clip-path, но проблема остается с закруглениями
border radius на местах среза не действует, так же сам border задавать бесполезно, на местах среза он так же не действует
svg не вариант, т.к на сайте будет очень много таких блоков, которые будут иметь разную высоту, ширину и пр.
Не всюду пока поддерживается, но очень удобно corner-shape
Там где не поддерживается, можно оставить обычные скругления или не скруглять.
Но разумеется, зависит от ТЗ, можно ли так поступить (я бы постаралась уговорить). Если нет, то по-старинке, вариантов много: svg, clip-path, псевдо, градиенты и т.д.
Средний
