How to place 2 div blocks in a diamond shape so that one edge overlaps the other?

Question

css

Tell me please! How to place 2 div blocks in a rhombus, so that one edge overlaps the other. At the same time, when the window is resized, they adapt synchronously and do not lose the given shape.

Approximately as in the picture

Answer 1

Answer 2

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