xmoonlight
@xmoonlight
https://sitecoder.blogspot.com

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

Всем привет.

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

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

Заранее, всем Спасибо!
  • Вопрос задан
  • 24419 просмотров
Пригласить эксперта
Ответы на вопрос 3
squitcher
@squitcher
Верстальщик
не особо понятно что ты хочешь, но если это то о чем я думаю то тебе поможет bennettfeely.com/clippy
Ответ написан
@942547
.polygon {
    clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px), calc(100% - 5px) 100%,0 100%,0 5px);
}
Ответ написан
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал.
1. :before :after и https://habrahabr.ru/post/126207/ смотрите треугольники
2. Если изменение размера блока "прямкакнаgif" - только js
3. background-size:cover - для фона родителя. Паттерны для дочернего элемента.
4. Адаптация но новым размерам блока - Да / Изменение размеров блока - js
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы