css - repetir - Forma de triángulo con imagen de fondo

imagen de fondo sin repetir css

Question

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

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

Actualmente, tengo solo dos divisiones que abarcan 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 hacerlo con triángulos 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;
}

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

Answer 1

Aquí están mis sugerencias de CSS:

1. Usar lienzo 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'');

Answer 2

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 )

Answer 3

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 :

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>

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

Answer 4

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

<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>