Triangle shape with background image

Question

I am working on a project that calls for two triangles to hold background images, and be links.

Here is my mock up for how I would like the two triangles.

Currently, I have just two divs that span the 900x600 with each triangle as a background image. The issue I am having now is I can't hover over the transparent part of the Cinema div to reach the photo div.

Can I accomplish this design with css3 triangles and set their background images? I always thought the custom shape is made up from a border, with a border-color.

Is it possible to do with css3 triangles, and if so, can someone help me with the code?

Here is what I currently have.

.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

It's really easy if you use child images for the links instead of background images. You just need to skew the two .option elements with different transform origins, then unskew their child images and set overflow: hidden on both .pageOption and the .option elements. Support is good, should work for everything except IE8/7 and Opera Mini.

DEMO

Result:

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> 

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