CSS3匹配形狀3D（立方體的頂部）

Question

我不是在數學和幾何形狀好，所以我很願意，如果有人可以幫助我創建以下形狀：

所以基本上形狀存在了3個長方形的，我得到了前兩個工作完美與變換矩陣，但我不能讓最後一個相匹配的形狀（見上文IMG鏈接）

JSFiddle, what I tried so far or see code below

HTML

<div class="shape"> 
    <div class="shape-rect-one"></div> 
    <div class="shape-rect-two"></div> 
    <div class="shape-rect-three"></div> 
</div>​ 

CSS

.shape { 
    perspective: 1000px; 
} 

.shape div { 
    width: 100px; 
    height: 100px; 
    opacity: 0.4; 
    background-color: #333; 
} 

.shape-rect-one { 
    z-index: 100; 

    transform: matrix(1, -0.40, 0, 1, 0, 0); 
    -webkit-transform: matrix(1, -0.40, 0, 1, 0, 0); 
} 

.shape-rect-two { 
    z-index: 200; 

    transform: matrix(1, -0.40, 0, 1, 0, 0); 
    -webkit-transform: matrix(1, 0.40, 0, 1, 0, 0); 
} 

.shape-rect-three { 
    z-index: 300; 
}​ 

Answer 1

這應該創建一個鑽石形狀。

transform: matrix(-0.965, 0.45, -0.965, -0.45, 0, 0); 
-webkit-transform: matrix(-0.965, 0.45, -0.965, -0.45, 0, 0); 

Answer 2

你可以用更簡單的方式做到這一點，只有一個元素。

DEMO

結果：

HTML：

<div class='piece'></div> 

相關CSS：

.piece { 
    width: 10em; height: 8.66em; /* 10*sqrt(3)/2 = 8.66 */ 
    background: rgba(0,0,0,.5); 
} 
.piece { 
    position: relative; 
    transform: rotate(-30deg) skewX(30deg); 
} 
.piece:before, .piece:after { 
    position: absolute; 
    width: inherit; height: inherit; 
    background: inherit; 
    content: ''; 
} 
.piece:before { transform: skewX(-30deg) skewX(-30deg); } 
.piece:after { transform: skewX(-30deg) rotate(-60deg) skewX(-30deg); }