Создание адаптивных фигур с помощью clip-path

Комментарии

Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.

Как только вы прикоснётесь к clip-path, то уже нет предела фигурам, которые вы можете создать, просто изменив несколько значений. Хотя в центре внимания этого руководства находится clip-path с использованием многоугольников в CSS, все демонстрации поддерживают указатель на встроенный SVG для получения дополнительной поддержки в Firefox. Создание адаптивной фигуры на SVG становится тривиальным, после того, как вы создадите адаптивную фигуру с помощью clip-path.

Оригинал: karenmenezes.com/shapes-polygon.

Карен Менезес

Карен Менезес

Фрилансер, разработчик адаптивных пользовательских интерфейсов, страстно любит CSS. Без ума от городского садоводства, городской флоры, альтернативных методов лечения и создания новых рецептов. Живёт в Мумбаи.

Автор: Карен Менезес
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич

Рекомендуем