Как разместить 2 div блока ромбом, чтобы один краем перекрывал другой?

Question

[pixal]

Подскажите пожалуйста! Как разместить 2 div блока ромбом, чтобы один краем перекрывал другой При этом при изменение размеров окна они синхронно адаптировались и не теряли заданную форму

Примерно как на картинке

Comments

[Максим]

скриншот есть?

[pixal]

Примерно так

Answer 1

[RAX7]

Comments

[pixal]

А как можно регулировать высоту блоков?

[RAX7]

pixal, padding-bottom у псевдо-элементов покрути

Answer 2

[Дуболом Одноклеточный]

.box2 {
  transform: translate(-20%, -20%); /* или сюда вместо процентов ширину первого квадрата забей */
}