Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.
Как только вы прикоснётесь к clip-path, то уже нет предела фигурам, которые вы можете создать, просто изменив несколько значений. Хотя в центре внимания этого руководства находится clip-path с использованием многоугольников в CSS, все демонстрации поддерживают указатель на встроенный SVG для получения дополнительной поддержки в Firefox. Создание адаптивной фигуры на SVG становится тривиальным, после того, как вы создадите адаптивную фигуру с помощью clip-path.
Оригинал: www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/.