Forma de triángulo con imagen de fondo

Estoy trabajando en un proyecto que requiere dos triangularjs para guardar imágenes de fondo y enlaces.

Aquí está mi maqueta de cómo me gustaría los dos triangularjs.

Triángulos con imágenes de fondo

Actualmente, tengo solo dos divisiones que abarcan el 900×600 con cada triángulo como imagen de fondo. El problema que estoy teniendo ahora es que no puedo pasar el cursor sobre la parte transparente de Cinema div para llegar a la foto div.

¿Puedo lograr este diseño con triangularjs css3 y establecer sus imágenes de fondo? Siempre pensé que la forma personalizada se compone de un borde, con un color de borde.

¿Es posible hacerlo con triangularjs css3 y, de ser así, alguien puede ayudarme con el código?

Esto es lo que tengo actualmente.

.pageOption { position: relative; width: 900px; height: 600px; } .pageOption .photo { position: absolute; top: 0px; left: 0px; width: 900px; height: 600px; background: url('../images/menuPhoto.png') no-repeat 0 0; } .pageOption .cinema { position: absolute; bottom: 0px; right: 0px; width: 900px; height: 600px; background: url('../images/menuCinema.png') no-repeat 0 0; } 
 

Es realmente fácil si utiliza imágenes secundarias para los enlaces en lugar de imágenes de fondo. Solo tiene que inclinar los dos elementos .option con orígenes de transformada diferentes, luego debe invertir sus imágenes secundarias y establecer el overflow: hidden tanto en .pageOption como en los elementos .option . El soporte es bueno, debería funcionar para todo excepto IE8 / 7 y Opera Mini.

MANIFESTACIÓN

Resultado :

imágenes triangulares

HTML :

  

CSS relevante:

 .pageOption { overflow: hidden; position: relative; width: 40em; height: 27em; } .option, .option img { width: 100%; height: 100%; } .option { overflow: hidden; position: absolute; /* arctan(27 / 40) = 34.01935deg * need to skew by 90deg - 34.01935deg = 55.98065deg */ transform: skewX(-55.98deg); } .option:first-child { left: -.25em; transform-origin: 100% 0; } .option:last-child { right: -.25em; transform-origin: 0 100%; } .option img { transform: skewX(55.98deg); transform-origin: inherit; } 

Aquí están mis sugerencias de CSS:

  1. Usar canvas que es una etiqueta HTML5 y no es un navegador cruzado.
  2. Usando SVG . (El más confiable)
  3. Con CSS3, gire la transición y cúbrala en un contenedor con desbordamiento oculto. Nuevamente no es un navegador cruzado.

Girar la transición:

 -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome -moz-transform: rotate(7.5deg); /* FF3.5+ -ms-transform: rotate(7.5deg); /* IE9 -o-transform: rotate(7.5deg); /* Opera 10.5 transform: rotate(7.5deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 

Puede lograr este diseño con varios enfoques. Aquí hay un ejemplo usando un svg en línea y el elemento clip-path :

             

Como dijiste, los trinquetes css3 están hechos de bordes, por lo que no puedes adjuntar fondos a ellos.

Le sugiero que solo use dos PNG uno sobre el otro y use js para escuchar el evento click y crear la acción correcta en función de la posición del mouse.

También hay una propiedad css de webkit-mask pero no está soportada en otros navegadores (la usé para un pequeño truco de pilling de páginas – http://jsfiddle.net/xTNTH/3/ – lo mejor en safari [no js only css] – http://snag.gy/7fRNq.jpg )