How a CSS Diamond is Made

Imagine a box.
The box has the Cage.
The box rotates 45 degrees.
The Cage rotates -45 degrees.
The Cage zooms himself to fill gaps.
Bring up the Cage.
The box hides overflow parts.
The End.
Inspired by Animation to Explain CSS Triangles