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); }