Как лучше сверстать данный блок?

Question

[Владислав Линник]

Всем доброго времени суток, поскажите как реализовать такой блок?



Есть картинка в svg и сверстанный интерактивный список, проблема в том что список заезжает за рисунок (делал рисунок как псевдоэлемент фоном для списка).
Заранее благодарю

Answer 1

[ⓒⓢⓢ]

https://yadi.sk/i/B0__GVU90kOObA
Красный блок - слой со списком
Зелёный блок - слой с картинкой
позиционируете слой с картинкой выше слоя со списком, применяете z-index
В таком варианте проблем не вижу, в чём именно у вас загвоздка?

Comments

[Владислав Линник]

Проблема в том что svg элемент прозрачный и список потом заезжает за пирамиду, например при адаптиве, а мне надо чтобы все что левее пирамиды - исчезало

[ⓒⓢⓢ]

Владислав Линник, у списка делаете опорную точку "через острие" пирамиды.
Ширину списка указываете в процентах или относительные координаты (position\left\right)
Получится, что список уменьшается в размерах от пирамиды до относительного размера родственного блока
https://yadi.sk/i/cikjD_OlnRL0BQ

мне надо чтобы все что левее пирамиды - исчезало

Если так сделать, то обрежется и текст списка - оно точно вам так надо?

[Владислав Линник]

JRK_DV, да, тоже так думаю, спасибо буду пробовать

Answer 2

[Дмитрий Чайников]

Попробуйте регулировать через span, с шириной контейнера span12например так:

<div class="row">
   <div class="span3">Левая сторона (Банкрол и т.д.)</div>
   <div class="span6">Центр контейнера (экрана) с пирамидой</div>
   <div class="span3">Правая сторона (x10 и т.д.)</div>
</div>

Comments

[Владислав Линник]

Проблема не в размерах, мне нужно чтобы пирамида всегда перекрывала список, при адаптации в том числе

[Дмитрий Чайников]

В таком случае используйте слои z-index Например, в стилях блока со списком укажите:
z-index: 0;, а в блоке с пирамидой напишите:
z-index.: 100;
Таким образом список будет перекрываться пирамидой.

[Владислав Линник]

Дмитрий Чайников, я так и делал, странно конечно, но не работает…

[Владислав Линник]

Дмитрий Чайников, тем более svg прозрачное и сверху маленькая часть пирамиды за которую залазит список

[Дмитрий Чайников]

Чтобы z-index заработал, нужно указать позиционирование блока, например :
position: absolute;