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將正方形變成更細的菱形

回答

相關問題