全屏响应式三角形图案

Question

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

主要思路是您可以用拇指点击的两个三角形区域。我尝试通过CSS或jQuery创建可点击/触摸的两个三角形区域，但我失败了。

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

你有什么建议可以实现2个响应式三角形，适合屏幕，不重叠在这个屏幕中，可在DOM中点击和访问吗？

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

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

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

这张图片应该说明了这个思路：

- en4ce

Answer 1

您最好使用简单的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>

您可以使用CSS来在鼠标悬停时设置元素的样式：

#top:hover {
    fill: #880000;
}

使用jQuery检测元素是否被点击：

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

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

- Godwin

Answer 2

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

如果你需要一个实际的三角形，那么你可以添加一个svg或其他图形，但不要基于该实际图形来构建你的UI，而是基于点击位置来构建。

如果你的布局/UI需要三角形，那就是一个不同的问题。你可以通过媒体查询和复杂的断点来强制实现“三角形”布局。然而，你的问题没有提供足够的具体信息来指导回答你的UI困境。

- Luke

---

我已经编辑了帖子，更详细地解释了用户界面的问题，感谢您的建议！ - en4ce

@en4ce，非常感谢你的提问。这是一个非常好的问题。谢谢！ - Luke