jquery - toda - modal responsive css

Patrón de triángulo sensible a la pantalla completa

Question

Recientemente profundicé un poco más en el diseño de UX móvil y encontré un tema interesante con respecto a la selección de 1 mano / pulgar.

La idea principal es que tienes 2 áreas triangulares con las que puedes hacer clic con el pulgar. Intenté encontrar una solución a través de CSS o jQuery para crear 2 áreas de triángulo que son clic / touch-able pero fallé.

Lo intenté:
- fuentes del icono
- svgs (esto no funcionó, ya que svgs son todavía rectangulares)
- divs con bordes en forma de triángulo
- lienzo (no funcionó tan bien)
- Fuentes ASCII
- jQuery, nada realmente útil en este frente: /
- divs rotados (transformación CSS)

¿Tiene alguna sugerencia acerca de cómo puedo lograr 2 triángulos sensibles que se ajustan a la pantalla, no se superponen como en esta pantalla, que se puede hacer clic y accesible en el DOM?

El punto principal en términos de UI es que los usuarios necesitan ver las áreas de clic / tocar (visualmente) para determinar la posibilidad de interacción. Obtener el área de un clic (en un estilo de triángulo) probablemente no sea el problema. Sin embargo, mostrarles a los usuarios que necesitan interactuar en un área determinada es la clave.

¡No quiero tener escalas o diferentes versiones de imágenes! Me gustaría ver una solución CSS o JavaScript ...

Supongo que el mayor problema es que el triángulo no es proporcional + la capacidad de respuesta

Esta imagen debe ilustrar la idea: triángulo receptivo http://s7.directupload.net/images/140212/7q8q4nha.jpg

Answer 1

Salir de la caja un poco - ¿por qué no capturar todos los eventos de clic, luego extraer las coordenadas x, y y hacer algunas matemáticas simples para determinar en qué "triángulo" se produjo el clic?

Si necesita un triángulo real, puede agregar un svg u otro gráfico, pero no base su UI en ese gráfico real, ¿basarlo en la ubicación del clic?

Si su diseño / IU necesita triángulos, esa es una pregunta diferente de la detección. Puede aplicar el diseño de "triángulo" con consultas de medios y puntos de interrupción complicados. Sin embargo, su pregunta no contenía demasiados detalles para guiar una respuesta a sus problemas de UI.

Answer 2

Tu mejor opción es usar un 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>

Puede usar CSS para aplicar estilo a los elementos al desplazarse:

#top:hover {
    fill: #880000;
}

Y jQuery para detectar si se ha hecho clic en un elemento:

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

Aquí hay una demostración: http://codepen.io/Godwin/pen/mIqlA