【发布时间】：2015-08-25 22:21:30
【问题描述】：
我想制作一个由4个小三角形组成的图像背景三角形，就像这张图片一样
如何制作这个三角形图像背景形状的集合？！
.block {
width: 0;
height: 0;
border: solid 20px;
float: left;
}
.clear {
clear: both;
}
.top {
margin-left: 38px;
}
.top .left {
border-color: transparent green green transparent;
}
.top .right {
border-color: transparent transparent green green;
}
.bottom .left1 {
border-color: transparent red red transparent;
}
.bottom .mid1 {
border-color: blue blue red red;
}
.bottom .mid2 {
border-color: blue purple purple blue;
}
.bottom .right1 {
border-color: transparent transparent purple purple;
}<div class="top">
<div class="block left"></div>
<div class="block right"></div>
<div class="clear"></div>
</div>
<div class="bottom">
<div class="block left1"></div>
<div class="block mid1"></div>
<div class="block mid2"></div>
<div class="block right1"></div>
</div>【问题讨论】：
-
您可以随时使用自己喜欢的图像编辑器制作图像。否则，您需要满足您的问题的解释可能比您通常在此网站上得到的要长。
-
确实，您可能需要剪切每个图像（CSS 中不支持）然后单独定位每个图像/div。这个问题（IMO）对 SO 来说太宽泛了。
-
完全可行，但没有得到很好的支持。你支持什么浏览器？图片是动态的、用户提供的，还是网站上的静态图片？需要更具体地满足您的需求。
-
@SeanStopnik 实际上我想为其添加一项功能，即我的网站用户可以通过从静态菜单中选择（如益智游戏）来更改每个小三角形的图像背景。我该怎么做？！
-
是的，这绝对是您应该使用 SVG（或 Canvas，但 SVG 可能是更好的选择）的地方。不要费心尝试用 CSS 强制它 - SVG 会给你更好的结果，并且比你实现这一点所需的 CSS 功能还具有更好的浏览器支持。
标签： javascript jquery html css svg