Clip-path для искривления изображений и блоков
Сейчас в веб дизайне очень популярно использование геометрических фигур и скривленных элементов. Наверное Вы не раз видели сайты, где блоки или заголовки имеют не ровные границы, а немного косые.
В 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
В 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
Нет комментариев