Как сверстать данный блок с последующим адаптивом?

Question

[Ivan]

Всем привет, подскажите пожалуйста как правильно сверстать данный блок, в плане элементов между item (треугольные фигуры) которые утапливаются и выступают? Как в дальнейшем их адаптировать. Заранее спасибо всем откликнувшимся.

Comments

[Kentavr16]

Я думаю что просто на гридах, с отрегулированным значением gap. При этом адаптировать разве что отступы/гап/размер шрифта(?) для мобильников, сохраняя структуру 3 колонки/2ряда всеми силами. Это если нет четких указаний/лендинга к адаптиву. Если совсем не выходит я бы при малых размерах оставил только заголовки и иконки с условным знаком вопроса, при нажатии на которые показывал бы подсказку с текстом. Но это уже фантазии, зависящие от того на чем пишется сайт и как видится его дизайн.

Answer 1

[Виктор]

Примерно так


Для адаптива можно сделать несколько вариантов расположения стрелок и переключать их по media запросу

Answer 2

[drawnofmymind]

.triangle {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 90px 90px 90px;
   border-color: transparent transparent #005BFF transparent;
   transform: rotate(90deg);
}

1) добавляем для синего треугольника after
2) добавляем для белого треугольника before