创建四面体，每个单独的形状链接到页面

Question

Tetrahedron Menu Example

[]

请参阅附图，我很难创建一组响应的三角形组成四面体。我想要链接到页面的每个三角形。中间的三角形只是一个图像。非常感谢任何帮助，我一直在寻找无处可寻的任何例子。

Answer 1

您可以通过在图片上添加div并使用position:absolute放置它们来实现。

这是我所做的一笔（为第一个三角形做了）：CodePen

.myImg{
  width:500px;
  height:400px;
  background: url('https://i.stack.imgur.com/5cQ6H.jpg')
}

.triangle-left {
  position:absolute;
  top:40px;
  left:60px;
  width: 0;
  height: 0;
  border-left: 96px solid transparent;
  border-right: 98px solid transparent;
  border-top: 170px solid transparent;
  opacity:0.5;
  cursor:pointer;
  z-index:20;
}

.triangle-left:hover {
  border-top: 170px solid black;
}

<div class='myImg'></div>
<div class='areas'>
  <div class='triangle-left'></div>
  <div class='triangle-right'></div>
  <div class='triangle-bottom'></div>
</div>