CSS将正方形转换为更薄的菱形

Question

如何制作菱形:(如红色所示)通过使用css转换正方形？只有B点和C点必须移动.原始尺寸为25像素×25像素.

我正在努力实现这个结果,然后将它旋转45度,使它看起来像钻石.我认为这可以使用transform:matrix();

PS我想尝试尽可能不使用explorercanvas,因为我正在尝试最小化html中的脚本标记.

Answer 1

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

更改倾斜值以影响钻石的粗细程度.这将推出其他角落,如果需要保持特定尺寸,则需要缩放整个对象.

这是你所描述的转变的jsfiddle.
还有一些关于CSS转换的进一步阅读.