Как сверстать этот элемент?

Question

[Arhangel_one]

Как сверстать красный элемент слева чтобы он накладывался на соседние блоки ?

Answer 1

[ReActor Дмитрий Вершанский]

.block {
width: 300px;
height: 300px;
background: #f00;
position: absolute;
top: 0;
left: -150px;
transform: rotate(45deg);
z-index: 999;
}

Comments

[Владимир]

Накидал пробник https://jsfiddle.net/7pgmxfqj/
но я походу супер плохо разметил тут. с кучей z-index и тд. Только учусь.

я хоть и не ТС. Но мне интересно как лучше адаптировать подобнyю верстку.
Оно прям жестко все друг на друга налазит если уменьшать и это у меня ещё контента не так много.

[Ragtime Kitty]

Зачем z-index такой здоровый, там же картинка сверху.

[Arhangel_one]

Владимир, можно ли подобное сделать на bootstrap ?

[Владимир]

Arhangel_one, я не в курсе. cмотря что именно.
2-3 часа опыта bootstrap, пробовал в основном сетку. + по мелочи готовые классы (компоненты разные).
Пришел к выводу самому интереснее писать. +ненужно подключать ничего (-лишние кб).
Но возможно BS экономит время.

Визуально оно и выглядит как сетка. Ромбик с фото на 4 колонки и текст на 8 колонок.
И футер на 3 части разделен. (email phone office) = но можно просто flex прописать и тоже самое будет.

Либо я чет не так понял в BS.
нужно будет какой нибудь проект посмотреть с его использованием и полностью сделать.
Взяв лучшее удалив весь мусор ненужный оттуда.