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

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

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

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

Ответ 1

-webkit-transform: rotate(45deg) skew(20deg, 20deg)

Измените значения перекоса, чтобы повлиять на то, как получается тощий ваш алмаз. Это вытолкнет другие углы, и вам нужно будет масштабировать весь объект, если требуется поддерживать конкретные размеры.

Здесь jsfiddle с описанным вами преобразованием.
И некоторые дальнейшее чтение о преобразованиях CSS.

Ответ 2

Я знаю, что вы уже приняли ответ, но вы можете сделать это, не используя transform, который часто причудливый для реализации кросс-браузера (особенно в IE). Недостатком моей техники является то, что в игре есть еще несколько элементов.

Исходя из этого: http://www.howtocreate.co.uk/tutorials/css/slopes

Смотрите: http://jsfiddle.net/rQCQ5/

Ответ 3

Использование scaleX или scaleY может быть немного проще:

transform: scaleX(.5) rotate(45deg);

http://jsfiddle.net/greypants/t5Dt8/

Просто помните, что порядок имеет значение, и это противоположно тому, что вы думаете.

Ответ 4

Ana Tudor предлагает использовать skewX и scaleY для компенсации того, чтобы размеры были одинаковыми. Для дальнейшего понимания того, как работает skew, проверьте связанное видео

.rhombus {
    transform: skewX(30deg) scaleY(.86); /* .86 = cos(30deg) */
}

Ответ 5

Это тоже мой способ сделать это, но опять же я не думаю, что можно получить тени на нем должным образом.

 .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;
}

http://jsfiddle.net/vCQ3c/