Как создать ромб: 
(как показано красным), преобразуя квадрат с помощью css? Только точки B и C должны двигаться. Исходный размер квадрата - 25 пикселей на 25 пикселей.
Я пытаюсь достичь этого результата и позже поверну его на 45 градусов, чтобы он выглядел как алмаз. Я думаю, что это можно сделать с помощью transform: matrix();
P.S. Я хочу попытаться как можно больше не использовать explorercanvas, так как я пытаюсь свести к минимуму теги script в html.
-webkit-transform: rotate(45deg) skew(20deg, 20deg)
Измените значения перекоса, чтобы повлиять на то, как получается тощий ваш алмаз. Это вытолкнет другие углы, и вам нужно будет масштабировать весь объект, если требуется поддерживать конкретные размеры.
Здесь jsfiddle с описанным вами преобразованием.
И некоторые дальнейшее чтение о преобразованиях CSS.
Я знаю, что вы уже приняли ответ, но вы можете сделать это, не используя transform, который часто причудливый для реализации кросс-браузера (особенно в IE). Недостатком моей техники является то, что в игре есть еще несколько элементов.
Исходя из этого: http://www.howtocreate.co.uk/tutorials/css/slopes
Смотрите: http://jsfiddle.net/rQCQ5/
Использование scaleX или scaleY может быть немного проще:
transform: scaleX(.5) rotate(45deg);
http://jsfiddle.net/greypants/t5Dt8/
Просто помните, что порядок имеет значение, и это противоположно тому, что вы думаете.
Ana Tudor предлагает использовать skewX и scaleY для компенсации того, чтобы размеры были одинаковыми. Для дальнейшего понимания того, как работает skew, проверьте связанное видео
.rhombus {
transform: skewX(30deg) scaleY(.86); /* .86 = cos(30deg) */
}
Это тоже мой способ сделать это, но опять же я не думаю, что можно получить тени на нем должным образом.
.rhombus{
width: 0;
height: 0;
position: relative;
margin: -60px 0 0 60px;
border-bottom: solid 360px #000 ;
border-left: solid 240px transparent;
border-right: solid 240px transparent;
z-index:2;
}