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

В CSS-3 сделать такое крайне просто. Для этого есть свойство clip-path.

Работать с этим свойством просто, необходимо указать набор пар X и Y. По этим значениям строится кривая, и изображение обрезается по этой кривой.

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





Пример как можно красиво оформить блоки:

https://codepen.io/alexbsoft/pen/ExabOdM

Чтобы вручную не прописывать координаты точек, можно использовать любой генератор, например, https://bennettfeely.com/clippy/

Правда есть небольшой нюанс: это свойство не поддерживается в IE, Edge (надеюсь скоро исправят) и в Firefox до версии 54. Проверить поддержку можно тут: https://caniuse.com/#search=clip-path