Как обрезать div?

Question

[AlexFo90]

Здравствуйте профессионалы! В форуме нашел много похожих вопросов по такой теме "Как обрезать блок / или скошенный угол у блока" , но ответ не нашел(
Суть вопроса такая:
-как обрезать(скосить) угол у при не однородном фоне и вообще фон будет меняться, а блок всегда должен быть такой же!
- этот блок будет заполняться информацией (img, p, a) и т.д.
- при наведение на него :hover к нему должен применяться border по всему блоку с углом
- clip-path не подходит (IE)
- svg тоже
Может псевдоэлементами, но у меня не получалось(
Подскажите пожалуйста в каком направление работать над задачей?

Answer 1

[ColdSpirit]

https://stackoverflow.com/questions/7324722/cut-co...
Думаю это то что вы ищете. Тут куча ответов, мб найдете для себя что-нибудь

Comments

[AlexFo90]

Хорошо, спасибо, пойду посмотрю по ответам)

Answer 2

[Otrivin]

Ие не поддерживает свг? Даже в качестве фонового изображения?

Если поддерживает, то на ум приходит следующее:
1) обычный прямоугольный див без фонового цвета. В нем создаём псевдоэлемент с размером под площадь уголка + отступы, прижатый к верхнему правому углу. (Мы будем заполнять блок текстом, а псевдоэлемент не даст тексту залезать в площадь угла.
2) делаем векторную картинку с границей и срезанным уголком и ставим ее как фон у дива. Обязательно ширина и высота должны быть больше, чем предполагается использовать.
Векторная для того, чтобы при ресайзе не портилось качество. Фоновый свг позиционируем точно под псевдоэлемент, и задаём фиксированные размеры ему! Это чтобы при ресайзе уголок не менял пропорции.
2.1) у нас осталась проблема с отсутствующей отрисовкой границ снизу и слева. Решаем ее или с помощью множественных фоновых изображений (повторяем наш свг с этими отрисованными границами), или создаём дополнительные дивы с абсолютным позиционированием и прижатием к левой/нижней границе с заполнением цветом и толщиной / высотой в 1-2 пикселя.

П.с. сейчас подумал - можно и с растровым фоновым изображением - все равно мы задаём фиксированные размеры и делаем картинку больше, чем предполагается - угол не будет деформироваться.

Comments

[AlexFo90]

Спасибо, так все сложно((( тоесть в любом случае простого выхода из положения наверно не придумать

[Otrivin]

AlexFo90, если контент должен обтекать срез, то другого, к сожалению, не могу придумать

[AlexFo90]

Спасибо большое буду думать)