CSS Transform square into thinner rhombus

Question

How to create a rhombus: (as shown in red) by transforming a square using css? Only points B and C must move. Original size of square is 25px by 25px.

I'm trying to achieve this result and would later rotate it 45 degrees so that it would look like a diamond. I think this can be done using the transform:matrix();

P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html.

Answer 1

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

Change the skew values to affect how skinny your diamond gets. This will push out the other corners and you'll need to scale the whole object if maintaining the specific dimensions is a requirement.

Here's a jsfiddle with the transformation you described.
And some further reading on CSS transformations.

Answer 2

I know you already accepted an answer, but you can do it without using transform, which is often quirky to implement cross-browser (especially in IE). The downside to my technique is that there are a couple more elements in play.

Based off this: http://www.howtocreate.co.uk/tutorials/css/slopes

See: http://jsfiddle.net/rQCQ5/