Как кроссбраузерно получить блок такой формы?

Question

[invsm]

Как можно получить блок такой формы? Вариант с бордерами не подходит, в блоке фоном изображение..

Answer 1

[Дмитрий Кравченко]

попробуй oferflow: hidden и два песвдоэлемента с transform: rotate(45deg) и нужными позициями
только картинку специально подготовить нужно будет, скорей всего

Comments

[invsm]

этот вариант на крайний случай, т.к. подобный блок не один, хотелось бы использовать целые картинки..

[Дмитрий Кравченко]

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

[Дмитрий Кравченко]

invsm: стало интересно и я накидал пен: codepen.io/imdmitrykravchenko/pen/YqGMEY

[invsm]

Дмитрий Кравченко: Это то же самое.. Но, видимо, такой подход пока единственный, есть варианты с clip-path или mix-blend-mode, но нужна кроссбраузерность (хотя бы IE 10+). p.s. - раз интересно, вот еще пообсуждали: stackoverflow.com/questions/35991047/how-to-get-a-...

[Дмитрий Кравченко]

invsm: как насчет svg спрайтов, кстати?

Answer 2

[Vlad Tytcky]

codepen.io подойдет? если у вас на заднем плане картинка, то копайте в сторону SVG

Comments

[invsm]

да, на заднем плане тоже картинка.. Вы имеете ввиду clip-path? поддержка браузерами не очень..

Answer 3

[Web Developer Blog]

oferflow: hidden лучшее решение