divs要素からの応答ピラミッド

Question

div要素から応答性ピラミッドを作成する必要があります。私はピラミッドの各要素がクリック可能なリンクのように必要なので、ピラミッドの各要素（彼の下にある三角形とその下の四角形）はdivでなければなりません。私はCSSで新しく、すべての助けに感謝しています。

イメージ以下のように：

Answer 1

ハロー所与のリンクにおける結果は、三角形や四角形を製造するための各DIV擬似要素を用いて製造することができます。問題については、下の2つのリンクを参照してください。

https://css-tricks.com/snippets/css/css-triangle/

https://css-tricks.com/examples/ShapesOfCSS/

Answer 2

はここで奇妙な質問に対する私の答えは奇妙です。

.pi { 
 
    width: 100%; 
 
    transform: rotateX(60deg); 
 
    transform-style: preserve-3d; 
 
    transform-origin: 200px 500px; 
 
} 
 
.pi div { 
 
    background: red; 
 
    height: 100px; 
 
    border: 1px solid; 
 
    margin-bottom: 5px; 
 
} 
 
.cont { 
 
    perspective: 200px; 
 
    width: 500px; 
 
}

<div class=cont> 
 
    <div class=pi> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>