CSS Преобразование квадрата в более тонкий ромб

Как создать ромб: (как показано красным), преобразовав квадрат с помощью css? Только точки B и C должны двигаться. Исходный размер квадрата 25 пикселей на 25 пикселей.

Я пытаюсь добиться этого результата и позже поверну его на 45 градусов, чтобы он выглядел как ромб. Я думаю, что это можно сделать с помощью transform: matrix ();

PS Я хочу как можно больше стараться не использовать explorercanvas, так как я пытаюсь минимизировать теги скриптов в html.