title: Triangle shape with background image
body: <p>I am working on a project that calls for two triangles to hold background images, and be links.  </p>
  
  <p>Here is my mock up for how I would like the two triangles.  </p>
  
  <p><img src="https://i.stack.imgur.com/zYLXn.png" alt="Triangles with background images"></p>
  
  <p>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.  </p>
  
  <p>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.  </p>
  
  <p>Is it possible to do with css3 triangles, and if so, can someone help me with the code? </p>
  
  <p>Here is what I currently have.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pageOption"&gt;
    &lt;a href="#" class="option photo" id="weddingPhoto"&gt;&lt;/a&gt;
    &lt;a href="#" class="option cinema" id="weddingCinema"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>