CSS Transformar el cuadrado en un rombo más delgado

Question

Cómo crear un rombo: (como se muestra en rojo) transformando un cuadrado usando css? Solo los puntos B y C deben moverse. El tamaño original del cuadrado es 25px por 25px.

Estoy tratando de lograr este resultado y luego lo rotaría 45 grados para que se vea como un diamante. Creo que esto se puede hacer usando la transformación: matriz();

P.S. Quiero intentar tanto como sea posible para no usar explorercanvas, ya que estoy tratando de minimizar las etiquetas de script en el html.

Answer 1

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

Cambie los valores de inclinación para afectar la forma en que su diamante se vuelve delgado. Esto expulsará las otras esquinas y tendrá que escalar el objeto completo si mantener las dimensiones específicas es un requisito.

Aquí hay un jsfiddle con la transformación que describió.
Y algunos further reading en transformaciones de CSS.

Answer 2

Sé que ya aceptó una respuesta, pero puede hacerlo sin usar transform, que a menudo es raro de implementar entre navegadores (especialmente en IE). La desventaja de mi técnica es que hay un par de elementos más en juego.

Basado de esto: http://www.howtocreate.co.uk/tutorials/css/slopes

Ver: http://jsfiddle.net/rQCQ5/

Answer 3

usando scaleX o scaleY puede ser un poco más simple:

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

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

acabamos de recordar que las cuestiones de orden , y es lo contrario de lo que crees que sería.

Answer 4

Esta es también mi forma de hacerlo, pero una vez más, no creo que sea posible obtener sombras en él correctamente.

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

Answer 5

Ana Tudor suggests de usar skewX y scaleY para compensar a mantener las dimensiones del mismo. Para obtener más información sobre cómo funciona skew, consulte el video vinculado

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