简单的菱形照片：效果如下
代码部分：
. d1{
边距-左： 100 px；
显示：在线块；
传输：旋转器(45 deg )；
overflow :隐藏；
}
. d1img {
最大宽度：100 %；
最大高度： 100 %；
传输：旋转(-45 deg ) scale ) 1.42；
}
条纹的背景原理有点相似，但步骤不同。
第一步：实现以下效果：
CSS部分：至少4个纹理//***此处0指前颜色的结束位置***
. d3 {
background 3360 linear-gradient (# FB 325 %、#58a 0、#58a 50%、#fb3 0、#fb3 75%、#58a 0)；
background-size: 100% 30px； 使用background-size调整大小
background-repeat :否- repeat； 为了看到效果，这里消除了重复
}
使用步骤tansform旋转背景具有以下效果： 使用默认平铺。
CSS部分：
. d4 {
background 3360 linear-gradient (45 deg，#fb3 25%，#58a 0，#58a 50%，#fb3 0，#fb3 75%，#58a 0)；
background-size: 40px 40px；
}
但是，上述方法仅实现了45度斜条纹的背景，如果该方法为60度，将发生以下情况。
因为度数发生了变化，所以需要重新计算每个重复颜色的块大小，但大致思路很清晰。 以下是最终解决方案：
可以轻松处理60、75或其他指定的倾斜数值
60deg 75deg
. d5 {
background 3360 repeating-linear-gradient (75 deg，#fb3，#fb3 15px，#58a 0，#58a 30px )；
/*最终使用更简单的方法repeating-linear-gradient平铺线性渐变*
}
原文： 3358 www.cn blogs.com/SUNY AAA/p/6765321.html