CSS Transform square into thinner rhombus

问题

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.

回答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.

回答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/

回答3:

Using scaleX or scaleY may be a little simpler:

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

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

Just have to remember that the order matters, and it's the opposite of what you think it would be.

回答4:

Ana Tudor suggests to use skewX and scaleY to compensate to keep the dimensions the same. For further understanding about how skew works, check the linked video

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

回答5:

This is also my way of doing it, but yet again I don't think it's possible to get shadows on it properly.

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

来源：https://stackoverflow.com/questions/5572786/css-transform-square-into-thinner-rhombus

标签

css

matrix

transform