title: Full screen responsive triangle pattern
body: <p>Recently I dug a bit more into mobile UX design and I found a interesting topic regarding 1 hand / thumb selection.</p>
  
  <p>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.</p>
  
  <p>I tried:<br>
  - icon fonts<br>
  - svgs (this did not work, since svgs are still rectangular) <br>
  - divs with borders shaped into a triangle<br>
  - canvas (did not work out so well)<br>
  - ASCII fonts<br>
  - jQuery, nothing really useful on this front :/<br>
  - rotated divs (CSS transform)<br></p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>I do not want to have scaled or different versions of pictures! Id like to see CSS or JavaScript solution...</p>
  
  <p>I guess the biggest problem is that the triangle is not proportional + the responsiveness</p>
  
  <p>This picture should illustrate the idea:
  <a href="https://i.stack.imgur.com/kdjAk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kdjAk.jpg" alt="responsive triangle"></a>
  </p>