#html #css #svg
#HTML #css #svg
Вопрос:
Проблема в том, что внизу v-образный тип, как здесь. Мне нужно обрезать углы блока, оставляя фиксированный фон (background-attachment: fixed), чтобы он оставался прокручиваемым и видимым через v-образный низ. Кроме того, угол должен быть фиксированным в каждом одном и том же блоке (маска svg мне не помогает из-за ее масштабируемости). Высота блоков различна.
В течение нескольких дней я пытаюсь решить эту проблему … кто-нибудь может помочь ?…
PS: оба блока на скриншоте (желтый и темный) отличаются только своим содержимым и фоновым изображением, поэтому они оба имеют v-образные треугольные основания с фиксированным фоном.
Редактировать: требуется поддержка кроссбраузерных.
Комментарии:
1. HTML или jsfiddle было бы лучше?
2. jsfiddle с несколькими одинаковыми блоками и разными фонами
Ответ №1:
Я пробовал с clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); единственной проблемой в том, что вы не можете сказать 60 пикселей снизу.
вот скрипка
Комментарии:
1. но я могу использовать js или jq и вычислить его. Большое спасибо!
2. Забыл спросить … а как насчет firefox, мобильных браузеров и IE?
3. о .. да, поддержка этого все еще довольно ограничена, я думаю, что это работает только в Chrome и Mobile Chrome. но я не знаю другого способа получить этот эффект.
Ответ №2:
Я бы решил эту проблему с помощью трех div. Самый внешний имеет темный / черный фон.
Следующий содержит желтый фон. Он может быть дочерним элементом самого внешнего.
Затем я бы создал прозрачный PNG с V-образной формой и поместил его поверх внутреннего (желтого) div. Если вы разместите этот div внизу внутреннего / желтого div, это будет выглядеть так, как будто он исчезает внутри фона.