Javascript 平行四边形横幅在悬停时展开

我正在尝试制作一个横幅，其中包含4幅图片，可在悬停时展开，并允许用户单击其中的按钮。横幅应为正方形，内部为平行四边形

这就是我到目前为止得到的（）：

---

我似乎无法正确塑造侧面，文本总是在图像下方。请帮忙

我不太明白你说的平行四边形是什么意思。我想矩形是一个有效的平行四边形。它看起来很酷，那怎么了？你不能让形状的边缘有尖角吗？在你的电脑上看不到任何文字jsbin@joe他们有一个例子。若要将文本放在内部，请使用位置：相对和z索引，它应该可以很好地工作。@AlanSutherland是的，我希望边缘有尖角，但我不知道如何操作。@samayres1992我尝试使用z索引和相对将文本放在前面，但不起作用……它仍然留在图像后面