全屏响应三角形图案答案

【问题标题】：Full screen responsive triangle pattern全屏响应三角形图案
【发布时间】：2014-03-11 13:17:24
【问题描述】：

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

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

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

您对我如何实现 2 个适合屏幕的响应式三角形有任何建议，不要像在此屏幕中那样重叠，在 DOM 中可点击和访问？

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

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

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

这张图片应该说明这个想法：

【问题讨论】：

标签： jquery html css canvas

【解决方案1】：

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

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

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

【讨论】：

我确实编辑了帖子以进一步解释 UI 问题，感谢您的建议！
@en4ce 不客气。这是一个很好的问题。谢谢！

【解决方案2】：

您最好的选择可能是使用简单的 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

【讨论】：