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

Question

[frontAng]

тоесть что нужно задавать вместо min-width: 200px;
https://jsbin.com/qigexixile/2/edit?html,css,output

Comments

[Ivan Ustûžanin]

в каком смысле адаптивным?

[frontAng]

Ivan Ustûžanin, при уменьшении экрана итемы уменьшались также пропорционально

[Ankhena]

frontAng,

при уменьшении экрана итемы уменьшались также пропорционально

Единицы измерения зависящие от ширины вьюпорта это vw, от ширины контейнера cqw

В вашем случае, кажется, достаточно обычных %, сдвиг тоже в %. Можно отрицательным margin.
nth-child кроме цвета ни за чем не нужен.

[frontAng]

Ankhena, в % и пробую https://jsbin.com/yekiwakuza/1/edit?html,css,output

[Ankhena]

frontAng, и что, блоки не уменьшаются при уменьшении окна?

[frontAng]

Ankhena, уменьшаются, но не растягиваются на допустимую ширину контейнера

[Ankhena]

frontAng,

но не растягиваются на допустимую ширину контейнера

Растягиваются. Но нужно взять в руки калькулятор и правильно посчитать проценты с учётом сдвигов. Если сдвиги по-прежнему нужны в px, то через calc. Если в %, то напрямую.

[frontAng]

Ankhena, понимаю, что min-width: calc(25% + 38px); решит проблему. Но не понятно , как сделать чтобы оно считало не "магичское" значение 38

[Ankhena]

frontAng,

как сделать чтобы оно считало не "магичское" значение 38

Вы же его как-то вычислили?
Так и пишите, как вычисляли, используя кастомку.
Псевдокодом как-то так:

--shift: 150px

для сдвига
left: var(--shift)

для ширины
calc((100% + var(--shift))/4)

И про sibling-index() почитайте, может легче будет, если поддержка устраивает.

[frontAng]

Ankhena, https://jsbin.com/giqusevuva/1/edit?html,css,output

[Ankhena]

frontAng,
shift указывается один раз, самый большой. Ведь ширина элементов одинаковая.
Для остальных элементов можете тоже использовать shift для сдвига, вычисляя его через calc как треть и две трети.
И почитайте как работают и применяются кастомные свойства.

Задача перестала иметь отношение к вёрстке, это школьная математика средних классов.

[frontAng]

Ankhena,

--shiftWidth: 150px;
    --shift: 0px;
    width: calc((100% + var(--shiftWidth)) / 4);
    transform: translateX(var(--shift));
    &:nth-child(2) {
      --shift: -50px;
    }
    &:nth-child(3) {
      --shift: -100px;
    }
    &:nth-child(4) {
      --shift: -150px;
    }

так тоже пытался

[Ankhena]

frontAng, эммм.. Да что за ерунда?
Мало отличается от 38. Теперь опять нет связи со 150.