全屏响应三角形图案

Question

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

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

我尝试过:
- 图标字体
- svgs(这不起作用,因为svgs仍然是矩形的)
- divs的边框形状为三角形
- 画布(没有那么好用)
- ASCII字体
- jQuery,在这方面没什么用处:/
- 旋转div(CSS变换)

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

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

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

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

这张照片应该说明这个想法: 响应三角形http://s7.directupload.net/images/140212/7q8q4nha.jpg

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

Answer 2

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

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

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