Fullscreen Response Triangle

Question

I recently dug up a bit more in UX's mobile design, and I found an interesting topic regarding the choice of 1 hand / thumb.

The basic idea is that you have two areas of the triangle that you can click with your finger. I tried to find a solution using CSS or jQuery to create 2 areas of the triangle that can be clicked / touched, but I failed.

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

Do you have any suggestion on how I can reach 2 sensitive triangles that fit the screen, do not overlap, like on this screen, which are accessible and accessible in the DOM?

The main point from the point of view of the user interface is that users need to visually see the sensory areas (visually) in order to determine the possibility of interaction. Getting the click area (in triangle style) is most likely not a problem. However, showing users that they should interact in a specific area is key.

I do not want to have scaled or different versions of the images! I'd like to see a CSS or JavaScript solution ...

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

This picture should illustrate the idea: a responsive triangle http://s7.directupload.net/images/140212/7q8q4nha.jpg

Answer 1

Best to use plain 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> 

You can use CSS to style elements on hover:

 #top:hover { fill: #880000; } 

And jQuery to determine if an element was clicked:

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

Here is a demo: http://codepen.io/Godwin/pen/mIqlA

Answer 2

We move a bit outside the field - why not capture all the click events, and then derive the x, y coordinates and do some simple math to determine which “triangle” click occurred inside?

If you need an actual triangle, can you add it to SVG or some other graphic object, but don’t base your interface on this actual graphic base at the place of the click?

If your layout / user interface needs triangles, this is a different issue than detection. You can apply a triangle layout with media and complex breakpoints. However, your question does not contain a lot of specific features to guide the answer to your user interface problems.