Можно ли средствами только css компенсировать transform: translateY(-50%)?

Question

[lagudal]

Есть такой дизайн карточки. На мобильных первый элемент поднят, выведен за рамки своего родительского дива ровно на половину своей высоты. Т.к. в зависимости от ширины экрана и высота меняется, то не нашел ничего лучше, чем transform: translateY(-50%). Но в таком варианте следующий див получается с разрывом ровно на эту самую половину высоты первого. Было бы точное значение, не было бы проблем - отрицательный margin-bottom для первого и все.
А как лучше сделать в этом случае?

Comments

[Ankhena]

Разделите wrapper на два и вместо сдвига блока, его wrapper залейте градиентом 50%.

И зачем вам обертка container?

[Максим]

transform: origin(0,0)translateY(-50%) ,может так?

[cssfish]

Ankhena, отличное решение. Либо обертки или псевдо от кажого элемента заливать, а контейнер оставить общий.