Triangle shape with background image
css, css-shapes, svg
Solution
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;
}
Problem
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> ```