Html 基于CSS的三角图像

我到处找了好几个星期了，但我找不到解决我问题的答案

有可能在正三角形内有一个图像吗

我见过许多创建形状或遮罩的方法，但我需要一个真正的三角形，因为我需要有几个三角形彼此相邻，其中一些三角形向上对齐dwn，如下图所示：

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

我尝试过使用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>

.pageTri2{
溢出：隐藏；
位置：相对位置；
利润率：40px自动；
宽度：250px；高度：250px；
显示：内联块；
}
.option2、.option2 img{宽度：100%；高度：100%；}
.选择2{
溢出：隐藏；
位置：绝对位置；
变换：skewX（-25度）skewY（45度）；
变换原点：50%50%0；
}
.选择2：第一个孩子{
变换原点：100%0；
}
.选项2：最后一个孩子{
变换原点：0.100%；
}
.option2 img{不透明度：.75；转换：.5s；}
.option2 img:hover{opacity:1；}
.option2 img，.option2:after{
变换：斜X（-20度）斜Y（-20度）旋转（-50度）；
变换原点：0 100%0；
}
.option2:第一个子项：{top:0；left:0；}
.option2:在{right:0；bottom:0；}之后的最后一个子项

有可能有一个完美的结果吗？ 或者我想的方向不对

谢谢 啤酒

编辑：我做到了！！感谢@Spudley向我介绍SVG，感谢@o.v.建议使用JSFIDLE

---

下面是我的代码：

使用透明png或简单地使用css制作三角形。这里有一个css形状的链接

，非常严肃地说，看到了你试图实现的目标的模型图像后，我想说放弃用css实现的想法

使用SVG比使用CSS做这样的事情要好得多。CSS根本不是为创建复杂的形状模式而设计的。它可以做到这一点，但很快就会变得一团糟，对于您所追求的效果，您最终将需要一些额外的HTML标记。SVG正是为这类事情而设计的，而且做得很好

---

唯一的缺点是在旧IE版本中缺乏对SVG的支持，但是有一些解决办法。（在任何情况下，旧IE支持显然不是您的优先事项，因为您已经在使用

transform

和其他不适用于旧IE的CSS）

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

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

---

不清楚您想要实现什么（我在您的示例中没有看到任何图像），但您可能可以使用透明PNG图像和负边距来实现这一点。我不能使用透明PNG，我需要在三角形内部使用矩形图像。在我的示例中，有一个指向最终结果的链接。在每个三角形中需要插入一个三角形，就像三角形是普通图像的遮罩一样。更清楚吗？像这样的事情更清楚吗？好的，但这不是我要的。谢谢你的提示。我从未使用过SVG，但您认为可以将PNG/JPG转换为SVG中的三角形版本吗？我将搜索一些信息。SVG是矢量图形-即由线条和形状组成；PNG/JPG是位图-即由像素组成。它们的工作方式不同，因此转换可能不会产生完美的结果，但这可能是一个好的开始。像Inkscape这样的工具（它是免费的）在这里可能会有所帮助。但是根据你的例子，简单的三角形不需要太多的工作就可以从头开始创建。好的，但是如果我理解的很好，你是说在上传图像之前先将图像转换为svg。我需要一些程序化的东西。比如上传一个JPG/PNG并创建一个三角缩略图。我已经尝试了很多可能性，以我的背景和我所写的代码创建三角形，但我不能让它完美。所以这是不可能的？谢谢你的回答，但我试着用三角形作为图片的遮罩，然后把三角形一个接一个地放在一起，就像我贴在第一篇文章上的图片一样。@Stimentokenzo:哦，我明白了，我第一次读这个问题时一定没有抓住要点：）为了将来的参考，我建议您将代码添加到类似jsfiddle.net的东西中——它不仅是一个很好的沙盒，可以快速模拟，还可以快速预览您到目前为止对其他StackOverflower所做的工作