Forma de triángulo con imagen de fondo

Question

Estoy trabajando en un proyecto que requiere dos triángulos para contener imágenes de fondo y enlaces.

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

Actualmente, tengo sólo dos divs que abarcan todo el 900x600 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 triángulos 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 hacer con triángulos css3, y si es 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; 
 
}

<div class="pageOption"> 
 
    <a href="#" class="option photo" id="weddingPhoto"></a> 
 
    <a href="#" class="option cinema" id="weddingCinema"></a> 
 
</div>

Answer 1

Es muy fácil si utiliza imágenes infantiles 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 anular sus imágenes secundarias y establecer overflow: hidden en los elementos .pageOption y .option. El soporte es bueno, debería funcionar para todo excepto IE8/7 y Opera Mini.

DEMO

Resultado:

HTML:

<div class='pageOption'> 
    <a href='#' class='option' data-inf='photo'> 
    <img src='../images/menuPhoto.png'> 
    </a> 
    <a href='#' class='option' data-inf='cinema'> 
    <img src='../images/menuCinema.png'> 
    </a> 
</div> 

Relevante CSS:

.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; 
} 

Answer 2

Como usted ha dicho, tringles CSS3 están hechos de fronteras por lo que no puede adjuntar fondos para ellos.

Le sugiero que use simplemente dos PNG uno encima del 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 webkit-máscara css pero muy compatible en otros navegadores (lo usé para un pequeño truco pageing pilling - http://jsfiddle.net/xTNTH/3/ - mejor de safari [sin js única css] - http://snag.gy/7fRNq.jpg)

Answer 3

Aquí son mis sugerencias CSS:

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

transición Rotar:

-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'); 

Answer 4

Puede lograr este diseño con varios enfoques. Aquí hay un ejemplo usando un inline svg y la clip-path element:

<svg viewbox="0 0 10 6.7"> 
 
    <defs> 
 
    <clipPath id="top"> 
 
     <polygon points="0 0, 9.9 0, 0 6.6" /> 
 
    </clipPath> 
 
    <clipPath id="bottom"> 
 
     <polygon points="10 0.1, 10 6.7, 0.1 6.7" /> 
 
    </clipPath> 
 
    </defs> 
 
    <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/> 
 
    <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/> 
 
</svg>