2

我已经到处搜索了好几个星期，但我找不到我的问题的答案。

是否可以在正三角形内放置图像？

我见过很多创建形状或蒙版的方法，但我需要一个真正的三角形，因为我需要有几个相邻的三角形，其中一些倒置对齐，就像在这个 = 图像中一样：

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

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

我试过使用 skewX、skewY 和旋转，我有足够的结果，但它并不完美：

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

4

3 回答 3

6

严肃地说，在看到你想要实现的目标的模型图像之后，我想说放弃在 CSS 中实现它的想法。

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

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

于 2013-03-12T21:56:05.207 回答
3

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

于 2013-03-12T21:18:32.037 回答
1

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

.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*/
}

摆弄

于 2013-03-12T22:52:08.763 回答