CSS将方形变成更薄的菱形 [英] CSS Transform square into thinner rhombus

问题描述

如何使用css转换正方形，创建菱形：（如红色所示）只有B和C点必须移动。原始大小的正方形是25px x 25像素。

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.

我想实现这个结果，并将其旋转45度，使它看起来像一颗钻石。我认为这可以使用transform：matrix（）;

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。我想尝试尽可能不使用explorercanvas，因为我试图最小化脚本标签在html。

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.

推荐答案

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

$ b b

更改歪斜值以影响钻石的质感。

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.

这里有一个 jsfiddle 与您描述的转换。

和一些进一步阅读 CSS变换。

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

这篇关于CSS将方形变成更薄的菱形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！