Срезанные/скошенные углы у DIV-слоя с произвольным фоном внутри него и под ним на чистом CSS. Реально ли?

Question

[xmoonlight]

Всем привет.

Вот пример (здесь углы через :before/:after и кусочки .png):

Насколько реально сделать:
Срезанные углы у DIV под 45 градусов и произвольным фоном на слое (и вокруг него) на чистом CSS?
1. Поведение такое же как и с закруглёнными, только нужно срезать углы по-прямой.
2. Возможность сайзинга
3. Без нарезки фоновой картинки DIV на куски: изображение - всегда единое.
4. Без JS на чистом CSS и кросс-браузерно.

Насколько это реально сделать?

Заранее, всем Спасибо!

Comments

[HamSter]

clip-path попробуй

[xmoonlight]

HamSter: пробовал. там или фикс или проценты. не то! :(

[HamSter]

xmoonlight: и не фоном, а именно картинкой?

[xmoonlight]

HamSter: да без разницы... единица измерения на clip-path - или для всех проценты или пиксели. Смешивать - нельзя.

[HamSter]

xmoonlight: я по вопросу ... ну тогда, наверное, только картинку в граф. редакторе так вырезать и все)

[xmoonlight]

HamSter: надо попробовать rounded corners + перекрытие треугольником (вложенным слоем) + overflow:hidden... может и получится чего...

[HamSter]

xmoonlight: ждем решения ;)

[MasterCopipaster]

И как получилось? есть инфа?

Answer 1

[Андрей Никифоров]

не особо понятно что ты хочешь, но если это то о чем я думаю то тебе поможет bennettfeely.com/clippy

Comments

[xmoonlight]

это не поможет 100%!

Answer 2

[942547]

.polygon {
    clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px), calc(100% - 5px) 100%,0 100%,0 5px);
}

Answer 3

[Антон Нагаец]

1. :before :after и https://habrahabr.ru/post/126207/ смотрите треугольники
2. Если изменение размера блока "прямкакнаgif" - только js
3. background-size:cover - для фона родителя. Паттерны для дочернего элемента.
4. Адаптация но новым размерам блока - Да / Изменение размеров блока - js

Comments

[Антон Нагаец]

по первому пункту добавлю + маски https://habrahabr.ru/post/164409/

[xmoonlight]

Антон Нагаец: нет. это не то. На треугольники - нужно наложить фон. а по линку - только заливка. Т.к. там используется border.