CSS的三角形图像

Question

我在世界各地搜索了好几个星期,但我无法找到问题的答案.

是否可以在正三角形内部生成图像？

我已经看到很多方法来创建一个形状或一个蒙版,但我需要一个真正的三角形,因为我需要彼此相邻的几个三角形,其中一些三角形对齐,就像在这个=图像:

http://www.tiikoni.com/tis/view/?id=d49c960

我用颜色来分割两种类型的三角形,但它们都有图像而不是颜色.

我尝试过使用skewX,skewY和rotate,我有足够的结果,但它并不完美:

<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>

是否有可能获得完美的结果？或者也许我在想错误的方向？

谢谢啤酒

编辑:我做到了!! 感谢@Spudley向我发送SVG,并感谢@ov建议使用jsfiddle.

这是我的代码:http://jsfiddle.net/wkJKA/

Answer 1

严肃地说,看过你想要实现的模拟图像后,我会说放弃在CSS中实现它的想法.

像这样的东西使用SVG而不是CSS更好.CSS根本不是为创建复杂的形状模式而设计的.它可以做到这一点,但它很快就会变得混乱,而且对于你所经历的效果之类的东西,你最终还是需要一些额外的HTML标记.SVG就是为这种东西而设计的,并且做得很好.

唯一的缺点是在旧的IE版本中缺乏对SVG的支持,但是有一些解决方法.(在任何情况下,旧的IE支持显然不是你的优先考虑,因为你已经在使用transform和其他CSS不兼容旧的IE)