1) Самый простой и элегантный - css clip-path: polygon. Сделано за 2 минуты -
codepen.io/suez/pen/2a2b9d90bd00d671181906de5311bc8d
Из очевидных минусов - ограниченная поддержка браузерами. Но если вам пофиг на древнее инвалидное говно, то юзайте не раздумывая.
2) Svg clipPath. По сути дела это более геморройная версия первого варианта с некоторыми недостатками (например нельзя юзать %), но зато браузерная поддержка намного шире + можно юзать для каких угодно форм, ибо в основе лежит svg path.
3) Стандартные хаки с помощью :before/:after. Например создаете блок, который сверху имеет прямые углы. Затем :before элемент делаете треугольником слева (ксс трегольники легко гуглятся и даже есть сайт генератор -
apps.eky.hk/css-triangle-generator ). А :after блоком справа с закругленным верхним правым углом.
4) Что-нибудь еще.
Простой
