Triangular image with CSS - html

Question

I've searched everywhere for many weeks but I can't find an answer for my problem.
Is it possible to have an image inside a regular triangle?
I've seen many ways to create a shape or a mask, but I need a real triangle because I need to have several triangles next to each other, with some of them aligned upside-dwn, like in this= image:
http://www.tiikoni.com/tis/view/?id=d49c960
I've used color to divide the two types of triangle, but all of them have images instead colors.
I've tried using skewX, skewY and rotate, I have a sufficient result but it's not perfect:
<div class='pageTri2'>
<a href='#' class='option2'>
<img src='image.jpg'>
</a>
</div>
<style>
.pageTri2 {
overflow: hidden;
position: relative;
margin: 40px auto;
width: 250px; height: 250px;
display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
overflow: hidden;
position: absolute;
transform: skewX(-25deg) skewY(45deg);
transform-origin: 50% 50% 0;
}
.option2:first-child {
transform-origin: 100% 0;
}
.option2:last-child {
transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>
Is it possible to have a perfect result?
Or maybe I'm thinking in the wrong direction?
Thanks
Ale
EDIT: I've done it!! Thanks to #Spudley for address me to SVG and thanks to #o.v. for the suggestion to use jsfiddle.
Here's my code: http://jsfiddle.net/wkJKA/

Answer 1

In all seriousness, having seen your mock-up image of what you're trying to achieve, I'd say drop the idea of doing it in CSS.
Stuff like this is much better done using SVG rather than CSS. CSS simply wasn't designed for creating complex shape patterns. It can do it, but it gets messy quickly, and for something like the effect you're after, you'll end up needing some extra HTML markup. SVG is designed for exactly this kind of thing, and does it well.
The only downside is lack of support for SVG in old IE versions, but there are work-arounds for this. (and in any case, old-IE support clearly isn't a priority for you, given that you're already using transform and other CSS that doesn't work with old IE)

Answer 2

use transparent png or simply do triangles with css. Here is a link to css shapes http://www.css3shapes.com

Answer 3

You could rely on specifics of border rendering to achieve a triangle-looking shape. The shape could then be added with pseudoelements.
.pointy:before {
border:50px solid transparent;
border-bottom:86px solid green;
border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
width:0;
height:0;
display:inline-block;
content:"";
margin:0 -75px -5px 0; /*for a 50x50 icon*/
}
Fiddled