jquery - 全屏响应三 Angular 形图案

Question

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

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

我试过了:
- 图标字体
- svgs(这没有用，因为 svgs 仍然是矩形)
- 带有三 Angular 形边框的 div
- Canvas (效果不是很好)
- ASCII 字体
- jQuery，在这方面没有什么真正有用的:/
- 旋转 div(CSS 变换)

关于如何实现 2 个适应屏幕的响应式三 Angular 形，不要像这个屏幕那样重叠，在 DOM 中可点击和访问，您有什么建议吗？

UI 方面的要点是用户需要看到点击/可触摸区域(视觉上)以确定交互的可能性。获取点击区域(三 Angular 形样式)很可能不是问题。但是，向用户表明他们需要在特定区域进行交互是关键。

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

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

这张图应该可以说明这个想法:

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