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并感谢@ o.v。建议使用jsfiddle。

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

Answer 1

严肃地说，看过你想要实现的模拟图像，我会说放弃用CSS做的想法。

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

唯一的缺点是在旧的IE版本中缺乏对SVG的支持，但是有一些解决方法。（在任何情况下，老IE支持显然不是您的优先考虑，因为您已经使用transform和其他不适用于旧IE的CSS）

Answer 2

使用透明png或简单地用css做三角形。以下是css形状http://www.css3shapes.com

的链接

Answer 3

您可以依靠边框渲染的细节来实现三角形外观。然后可以使用伪元素添加形状。

.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

CSS的三角形图像

3 个答案: