Forma triangolare con immagine di sfondo

Question

Sto lavorando a un progetto che richiede due triangoli per contenere immagini di sfondo e collegamenti.

Ecco il mio mock up per come vorrei i due triangoli.

Attualmente, ho solo due div che attraversano il 900x600 con ogni triangolo come immagine di sfondo. Il problema che sto avendo ora è che non posso passare il mouse sopra la parte trasparente del div Cinema per raggiungere il div foto.

Posso realizzare questo disegno con triangoli css3 e impostare le loro immagini di sfondo? Ho sempre pensato che la forma personalizzata fosse composta da un bordo, con un bordo-colore.

È possibile fare con triangoli css3 e, in tal caso, qualcuno può aiutarmi con il codice?

Ecco cosa ho attualmente.

.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

E 'davvero facile se si utilizzano le immagini del bambino per i link, invece di immagini di sfondo. Hai solo bisogno di inclinare i due elementi .option con diverse origini di trasformazione, quindi di scardinare le loro immagini secondarie e impostare overflow: hidden su entrambi gli elementi .pageOption e sugli elementi .option. Il supporto è buono, dovrebbe funzionare per tutto tranne IE8/7 e Opera Mini.

DEMO

Risultato:

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> 

Rilevante 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

Come hai detto, tringles CSS3 sono realizzati dei confini e quindi non è possibile allegare sfondi a loro.

Ti suggerisco di utilizzare solo due PNG uno sull'altro e di utilizzare js per ascoltare l'evento click e creare l'azione corretta in base alla posizione del mouse.

C'è anche una proprietà webkit-maschera css ma molto supportato in altri browser (ho usato per un po 'pageing pilling trucco - http://jsfiddle.net/xTNTH/3/ - meglio su safari [JS solo css] - http://snag.gy/7fRNq.jpg)

Answer 3

Qui sono i miei suggerimenti CSS:

1. Utilizzo di canvas che è un tag HTML5 e non è un browser incrociato.
2. Utilizzo di SVG. (Il più affidabile)
3. Utilizzando CSS3, ruota la transizione e coprila in un wrapper con overflow nascosto. Anche in questo caso non è cross browser.

Ruota transizione:

-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

È possibile raggiungere questo layout con diversi approcci. Ecco un esempio utilizzando un inline svg e il 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>