全屏响应三角模式 [英] Full screen responsive triangle pattern

问题描述

最近我对手机用户体验设计做了更多的探索，我发现了一个关于1手/拇指选择的有趣话题。

Recently I dug a bit more into mobile UX design and I found a interesting topic regarding 1 hand / thumb selection.

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

The main idea is that you have 2 triangle areas that are clickable with your thumb. I did try to find a solution via CSS or jQuery to create 2 triangle areas that are click/touch-able with but I failed.

我试过：

- 图标字体

- svgs（这不起作用，因为svgs仍然是矩形）

- 边框形状为三角形的divs

-

- ASCII字体

- jQuery，在此前面没有什么真正有用的：/

- rotate divs（CSS transform ）

I tried:
- icon fonts
- svgs (this did not work, since svgs are still rectangular)
- divs with borders shaped into a triangle
- canvas (did not work out so well)
- ASCII fonts
- jQuery, nothing really useful on this front :/
- rotated divs (CSS transform)

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

Do you have any suggestion about how I can achieve 2 responsive triangles that fit the screen, do not overlap as in this screen, that are clickable and accessible in the DOM?

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

The main point in terms of UI is that the users need so see the click / touchable areas (visually) in order to determine the possibility of interaction. Getting the area of a click (in a triangle style) is most likely not the problem. However, showing the users that they need to interact on a certain area is key.

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

I do not want to have scaled or different versions of pictures! Id like to see CSS or JavaScript solution...

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

I guess the biggest problem is that the triangle is not proportional + the responsiveness

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

This picture should illustrate the idea:

推荐答案

您最好的选择是使用简单的SVG

Your best bet may be to use a simple 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为hover上的元素设置样式：

You can use CSS to style the elements on hover:

#top:hover {
    fill: #880000;
}

和jQuery来检测元素是否被点击：

And jQuery to detect if an element has been clicked:

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

这里是一个演示： http：// codepen。 io / Godwin / pen / mIqlA

这篇关于全屏响应三角模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！