CSS将正方形变成更细的菱形

如何创建菱形： rhombus （如红色所示）通过使用css变换正方形？只有B点和C点必须移动。正方形的原始大小是25px乘25px。CSS将正方形变成更细的菱形

我试图达到这个结果，稍后将它旋转45度，使它看起来像一颗钻石。我认为这可以使用transform：matrix（）;

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

2011-04-06 UrBestFriend

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

更改倾斜值以影响您的钻石如何变瘦。这将推出其他角落，如果需要维护特定维度，则需要缩放整个对象。

以下是您所描述的转换中的jsfiddle。
以及一些关于CSS转换的further reading。

来源

2011-04-06 21:05:22 RSG

谢谢！正在试图找出变换：矩阵时偏斜可以很好地工作！ – UrBestFriend 2011-04-06 21:09:18

我知道你已经接受一个答案，但你可以做到这一点，而无需使用transform，这往往是古怪实现跨浏览器（尤其是IE）。我的技术的缺点是有更多元素在发挥作用。

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

参见：http://jsfiddle.net/rQCQ5/

来源

2011-04-06 21:12:25 thirtydot

这是一个很好的替代解决方案。实际上，除非有使用CSS转换的理由，否则将其部署到网页的最佳方式是以任何精灵或数据源属性优化为担保的gif。 – RSG 2011-04-06 21:46:39

@RSG：我同意。我会给你+1为您有效的答案，但我不幸跑出票！ – thirtydot 2011-04-06 21:48:44

谢谢你，但不幸的是不能使用这个，因为我必须添加一个下拉阴影。 – UrBestFriend 2011-04-06 21:57:21

使用的scaleX或的scaleY可能有点简单：

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

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

只是要记住的是，为了事项，而这与你认为的相反。

来源

2013-03-12 13:53:20

这也是我的做法，但我不认为有可能正确地获得阴影。

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

来源

2013-08-13 20:37:02 Blckpstv

安娜铎suggests使用skewX和scaleY补偿，以保持尺寸不变。要进一步了解skew如何工作，请检查链接的视频

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

来源

2014-05-06 20:56:02

CSS将正方形变成更细的菱形

回答

相关问题