Исправляем CSS велосепидирование для создания геометрических фигур с помощью clip-path
Каждый, кто пытался создать стрелки или треугольники при помощи HTML и CSS знает, что для этого приходится использовать какой-либо хак. Наиболее популярным методом является создание таких элементов при помощи свойства border или с использованием unicode символов.
Конечно, мы можем использовать оба этих хака, они они по прежнему остаются ужасными решениями и делают наш код менее гибким и более уродливым. Для примера, мы не сможем сделать треугольник с фоновым изображением так как border может быть только одного цвета.
Используем Clip-path
Clip-path достаточно молодое CSS свойство, которое позволяет нам скрыть одну часть элемента и показать другую. Вот как это работает:
Допустим, у вас есть простой div элемент с фоновым изображением:
Чтобы превратить его в треугольник нам потребуется функция polygon(). Она принимает в качестве параметров точки, которые определяют форму нашей фигуры. Для треугольника это 3 точки. Давайте попробуем изменить значения, чтобы увидеть как изменится фигура.
Все, что находится внутри, обозначенной фигуры, будет показано, а все, что снаружи, скрыто. Таким образом мы можем создавать не только треугольники, но и любые не симметричные фигуры, которые будут вести себя как обычные CSS блоки.
Единственный минус такого подхода заключается в том, что нам приходится вычислять координаты точек, чтобы получить необходимую фигуру. Однако, это значительно лучше чем использовать border или unicode символы.
Поддержка браузерами
Если вы откроете caniuse, то увидите, что все весьма неплохо, особенно в случае с Chrome. Если хотите добиться поддержки в старых версиях Safary, то используйте префикс -webkit-. FireFox имеет поддержку clip-path начиная с версии 53. IE/Edge как всегда бежит позади планеты всей, однако мы можем надеяться на реализацию поддержки в Edge в будущем.
Для ознакомления
Свойство clip-path можно использовать и в множестве других трюков, в том числе и с SVG. Вы можете найти больше информации по следующим ссылкам:
comments powered by HyperComments