CSS превратить квадрат в более тонкий ромб

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

См .: http://jsfiddle.net/rQCQ5/

Answer 3

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

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

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

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

Answer 4

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

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

Answer 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/