来自divs元素的响应金字塔

Question

我需要从div元素创建响应式金字塔。金字塔的每个元素（顶部的三角形和他下面的下一个四边形）必须是div，因为我需要金字塔的每个元素，如可点击的链接。我是css的新手，我很感激你的每一个帮助。

如下图所示：

Answer 1

这是我对奇怪问题的奇怪回答。

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

Answer 2

你好，给定链接中的结果可以通过在每个div中使用伪元素来生成三角形和四边形。有关您的问题，请参阅以下两个链接。

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

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