全屏響應三角形態

最近我挖多一點到的移動用戶體驗設計，我發現關於1手/拇指選擇一個有趣的話題。全屏響應三角形態

主要的想法是，你必須爲可點擊用拇指2個三角區。我確實試圖通過CSS或jQuery找到一個解決方案來創建2個可點擊/觸摸的三角形區域，但我失敗了。

我想：
- 圖標字體
- svgs（這並不工作，因爲svgs仍然是矩形）
- 的div形成一個三角形的邊界
- 畫布（沒有工作這麼好）
- ASCII的字體
- jQuery的，沒有在這方面非常有用：/
- 旋轉的div（CSS變換）

你有關於我怎麼能任何建議適合屏幕的chieve 2響應三角形，不像本屏幕中那樣重疊，可在DOM中進行點擊和訪問？

在UI方面，主要的一點是，用戶需要這麼看，以確定相互作用的可能性點擊/觸控區（視覺）。獲得點擊區域（以三角形樣式）很可能不是問題。但是，向用戶展示他們需要在某個區域進行交互是關鍵。

我不希望有圖片的縮放或不同的版本！我還想看看CSS或JavaScript解決方案...

我想最大的問題是，三角形是不成正比+響應

這幅照片需要說明的想法： responsive triangle http://s7.directupload.net/images/140212/7q8q4nha.jpg

來源

2014-02-12 en4ce

外出的方塊 - 爲什麼不捕獲所有的點擊事件，然後挖掘出x，y座標並做一些簡單的數學運算來確定發生點擊的是哪個「三角形」？

如果你需要一個實際的三角形，那麼你可以添加在SVG或其他一些圖形，但請不要將您對實際的圖形用戶界面 - 基礎它的點擊的位置？

如果你的佈局/ UI需要的三角形比檢測一個不同的問題。您可以通過媒體查詢和複雜的斷點強制執行「三角形」佈局。然而，你的問題並沒有包含太多的細節來指導你的UI困境的答案。

來源

2014-02-12 22:57:34 Luke

我的編輯帖子解釋了用戶界面的問題，謝謝你的建議！ – en4ce

@ en4ce非常受歡迎。這是一個非常好的問題。謝謝！ – Luke

你最好的選擇可能是使用一個簡單的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

來源

2014-02-12 23:09:33 Godwin

這似乎工作，謝謝！ – en4ce

全屏響應三角形態

回答

相關問題