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

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.

[frontAng]

Ankhena, такой вариант адекватный? только через min-width заработало с некими правками
https://jsbin.com/dekadubele/edit?html,css,output

[frontAng]

Ankhena или например так ?

width: calc((100% + var(--shiftWidth)) / 4);
    flex-shrink: 0;

[Ankhena]

frontAng,

такой вариант адекватный?

Ещё раз: кастомное свойство shift указывается ОДИН раз и НЕ меняется.
Всё остальное вычисляется через него.
Можно указать 150 и делить либо 50 и умножать, как больше нравится. 50 - логичнее.

И замените трансформ на margin, хоть одинаковым будет для всех блоков, браузеру считать столько же, писать меньше.

Либо пишите свои 38, которые 37.5 на самом деле.

[Ankhena]

Красивое решение на гридах для современных браузеров через sibling-index
Но блоки не станут меньше, чем два сдвига. В вашем случае это 100.

.methods__wrap {
  --shift: 50px;
  display: grid;
  grid-template-columns: var(--shift) repeat(4, 1fr var(--shift));
  padding-top: 100px;
}

.methods__item {
  --n: sibling-index();
  grid-column: max(var(--n), calc(2 * var(--n) - 1)) / span 3;
  grid-row: 1/2;
  border-radius: 100vw 100vw 0 0;
}