CSS Transform square into thinner rhombus

css matrix transform
UrBestFriend picture UrBestFriend · Apr 6, 2011 · Viewed 14.2k times · Source

How to create a rhombus: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

RSG picture RSG · Apr 6, 2011 
-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.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More