全屏响应三角形图案

最近我在移动用户体验设计中挖掘了一些，我找到了一个关于1手/拇指选择的有趣话题。

主要思想是你有两个可以用拇指点击的三角形区域。 我确实试图通过CSS或jQuery找到一个解决方案来创建2个可点击/触摸的三角形区域，但是我失败了。

我试过了：
– 图标字体
– svgs（这不起作用，因为svgs仍然是矩形的）
– 带有边框形状为三角形的div
– 帆布（没有那么好用）
– ASCII字体
– jQuery，在这方面没有什么用处：/
– 旋转div（CSS变换）

您是否有任何关于如何实现适合屏幕的响应三角形的建议，如此屏幕中不重叠，可在DOM中单击和访问？

UI的主要观点是用户需要这样看到点击/可触摸区域（视觉上）以确定交互的可能性。 获得点击区域（以三角形样式）很可能不是问题。 但是，向用户显示他们需要在某个区域进行交互是关键。

我不想要缩放或不同版本的图片！ 我喜欢看CSS或JavaScript解决方案……

我想最大的问题是三角形不成比例+响应性

这张照片应该说明这个想法： 响应三角形http://sofzh.miximages.com/jquery/7q8q4nha.jpg

Answer 1

您最好的选择可能是使用简单的SVG

您可以使用CSS来设置hover时的元素样式：

 #top:hover { fill: #880000; } 

并使用jQuery检测是否已单击某个元素：

 $('#top').click(function () { ... 

这是一个演示： http ： //codepen.io/Godwin/pen/mIqlA

Answer 2

稍微走出盒子 – 为什么不捕获所有点击事件，然后挖掘x，y坐标并做一些简单的数学运算来确定点击发生在哪个“三角形”？

如果您需要一个实际的三角形，那么您可以添加svg或其他图形，但不要将UI基于该实际图形 – 基于点击的位置？

如果您的布局/ UI需要三角形而不是检测问题。 您可以使用媒体查询和复杂断点强制执行“三角形”布局。 但是，您的问题并没有太多的细节来指导您的UI问题的答案。