使用SVG属性patternTransform创建三角背景，可通过patternTransform的rotate设置旋转度数。
<svg width="100%" height="100%" viewBox="0 0 10 10" preserveAspectRatio="xMidYMid slice" > <defs> <pattern id="pattern" viewBox="0 0 10 10" patternTransform="rotate(45)" width="6%" height="6%" > <g stroke-width=".2" stroke="#000"> <rect width="100%" height="100%" x="0.10" y="0.10" fill="crimson" /> <rect width="100%" height="100%" x="1.77" y="1.77" fill="darkorange" /> <rect width="100%" height="100%" x="3.44" y="3.44" fill="gold" /> <rect width="100%" height="100%" x="5.10" y="5.10" fill="forestgreen" /> <rect width="100%" height="100%" x="6.77" y="6.77" fill="royalblue" /> <rect width="100%" height="100%" x="8.45" y="8.45" fill="rebeccapurple" /> </g> </pattern> </defs> <rect width="100%" height="100%" fill="url(#pattern)" /> </svg>具体效果如下：
出处：https://www.mabangzhu.com/jquery/2766.html
