Как обрезать в css?

То есть файл картинки можно оставить исходный, удобно.

Форма среза Для диагонального края подходит clip-path. Например: .photo { clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); }. Четыре точки описывают видимую область: верхняя сторона остается полной, нижний правый угол смещается влево.

Размеры Clip-path обрезает отображение, но сохраняет исходную коробку в раскладке. Соседние блоки не начнут обтекать диагональ автоматически. Ширину и высоту изображения задавайте отдельно.

Содержимое Проверьте, не попадает ли важная часть фото в срез. Для простого прямоугольного кадрирования в рамку удобнее object-fit, но произвольную диагональную форму задает именно область обрезки. Если обрезается интерактивный блок с текстом, не прячьте часть надписи или фокус за границей.

Для скошенного края задайте clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%). Это оставит видимой четырехугольную область и срежет часть справа снизу. Исходный файл не изменится. Коробка элемента в потоке тоже останется прямоугольной, поэтому пространство вокруг нужно планировать отдельно. Проверьте кадр на узкой ширине: проценты пересчитываются вместе с размерами изображения.