Свойство clip-path обрезает элемент по произвольной форме, фигуре.
clip‑path. МДН
Форма обрезки задаётся разными ключевыми словами. Самое универсальное — polygon — набор координат точек, образующих фигуру для обрезки. Координаты лучше задавать относительно размеров элемента, в процентах:
clip‑path. МДН
.clip {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}Свойство не меняет размеры элемента. Для браузера и соседних элементов это всё ещё прямоугольник:
.clip {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}Свойство анимируется:
@keyframes change-clip {
0% {
clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.clip {
animation: change-clip 2s ease-in-out infinite alternate;
}Чтобы не возиться с ключевыми словами и координатами вручную, используйте визуальные онлайн‑редакторы вроде Clippy:
В следующем совете расскажу о масках в ЦСС.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.