如何建立一个三角滑块？

Question

下午好！

我有一个三角形滑块设计，但没有HTML： triangular slider design at the bottom

它如何运作：

• 如果您将鼠标悬停在幻灯片（triagle）幻灯片grows a bit like this
上
• 如果点击它，灯箱就会打开
• 如果您点击灰色的下一个/上一个箭头，则会出现另一组6个图像

我试过用

• CSS border-triangles + border-image
• 将个别三角形图像向前旋转并将其容器向后旋转
• 悬停的地图标记，然后点击

但没有真正的解决方案。我感谢任何人的帮助。

Answer 1

你可以通过CSS3做什么。
必须要思考，它不会是旧浏览器的三角形 所以，你开始首先用方形shap构建滑块。 第二部分是旋转方块，隐藏其中一半，然后......

我将我的一个dabblet复制到liveweave.com，如果您愿意，可以在IE8中打开它：http://liveweave.com/UU2oOZ

这不是你的解决方案，这个菜单是垂直的），但它是一个可以帮助你开始尝试的例子。

Answer 2

您是想让整个平行四边形来回滑动，还是单个三角形图像？也许如果您有下一张幻灯片的示例，那将会有所帮助。

Answer 3

如果您正在寻找上述链接，您也可以使用已经是三角形的透明png，然后使用绝对定位使元素重叠。这不如使用CSS3那么优雅，但它是浏览器支持的通用解决方案。我想我们需要更多关于你想要完成的事情的细节。