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

Question

如何通过使用css转换正方形来创建菱形：（如红色所示）？只有B点和C点必须移动。原始尺寸为25像素×25像素。

我正在努力实现这一结果，然后将其旋转45度，使其看起来像钻石。我认为这可以使用transform：matrix（）;

来完成

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

Answer 1

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

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

这是一个jsfiddle，其中包含您所描述的转换 还有一些关于CSS转换的further reading。

Answer 2

我知道你已经接受了答案，但是你可以不使用transform来实现，这通常是古怪的，以实现跨浏览器（特别是在IE中）。我的技术的缺点是还有更多元素在起作用。

基于此：http://www.howtocreate.co.uk/tutorials/css/slopes

请参阅：http://jsfiddle.net/rQCQ5/

Answer 3

使用scaleX或scaleY可能会更简单一些：

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

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

只需记住订单很重要，而且与您的想法相反。

Answer 4

Ana Tudor suggests使用skewX和scaleY来补偿尺寸保持不变。要进一步了解skew的工作原理，请查看关联的视频

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

Answer 5

这也是我这样做的方式，但我再次认为不可能正确地遮挡它。

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