Jquery 全屏幕响应三角形图案

最近，我深入研究了移动用户体验设计，发现了一个关于单手/拇指选择的有趣话题

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

我试过：
-图标字体
-SVG（这不起作用，因为SVG仍然是矩形的）
-边框形成三角形的div
-画布（效果不太好）
-ASCII字体
-jQuery，在这方面没有什么真正有用的：/
-旋转divs（CSS变换）

你对我如何实现两个适合屏幕的响应三角形有什么建议吗？不要像这个屏幕那样重叠，它们可以在DOM中单击和访问

UI方面的要点是，用户需要看到点击/可触摸区域（视觉），以确定交互的可能性。获取单击区域（三角形样式）很可能不是问题。然而，向用户展示他们需要在某个区域进行交互是关键

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

我想最大的问题是，三角形与响应性不成正比

这幅图应该说明这一想法：

---

稍微超出框-为什么不捕获所有单击事件，然后挖掘出x、y坐标，并做一些简单的数学计算，以确定单击发生在哪个“三角形”内

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

---

如果您的布局/UI需要三角形，这是一个与检测不同的问题。您可以通过媒体查询和复杂的断点来实施“三角形”布局。然而，您的问题并没有包含太多的细节来指导用户界面问题的答案。

您最好使用一个简单的SVG

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
    <polyline points="0,0  1,0  0,1" fill="#F00" id="top"/>
    <polyline points="1,0  1,1  0,1" fill="#0F0" id="bottom"/>
</svg>

和jQuery以检测是否已单击某个元素：

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

---

这里有一个演示：

我确实编辑了这篇文章，进一步解释了用户界面的问题，谢谢你的建议@恩，不客气。这是一个很好的问题。非常感谢。

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