我先额外的说一下怎么用CSS绘制三角形：
绘制三角形是把边框加粗，将元素的宽高都设为0，让其余的边框颜色透明，下面我们来看实现的代码：
先把边框的颜色设置成不同颜色：
#div{ border-color: red blue green pink; border-style: solid; border-width: 80px; width: 0; }
显示的结果如下：
设置元素的三个边颜色透明，边框颜色默认：
#div1{ border-style: solid; border-width: 80px; width: 0; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; }
结果如下：
这样就实现了CSS画三角形。
灵活的运用CSS，可以实现很多的功能，下面我来说说怎么用CSS来绘制背景条纹：
这里要用到背景的线性渐变:background:linear-gradient
1.背景渐变：
#div2{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变*/ background: linear-gradient(#fb3 30%,#58a 70%);
效果如下：
中间有一块渐变区域；
把渐变比例进行调整：
background: linear-gradient(#fb3 50%,#58a 50%);//等价于 background: linear-gradient(#fb3 50%,#58a 0)
得到两块纯色区域：
我们就可以利用背景渐变的这个特性进行条纹背景的绘制了。
三色的条纹背景：
#div2{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变*/ background: linear-gradient(#fb3 30%,#58a 0,#58a 70%,yellow 0);
给背景加上尺寸的限制：
#div2{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变*/ background: linear-gradient(#fb3 30%,#58a 0,#58a 70%,yellow 0); /*线性渐变的宽度*/ background-size: 100% 45px; }
接下来，我们开始绘制纵向的条纹：要用到background:linear-gradient(to right......)
#div3{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变*/ background: linear-gradient(to right, #fb3 50%,#58a 0);
运行结果如下：
同样也给他一个尺寸限制：
#div3{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变*/ background: linear-gradient(to right, #fb3 50%,#58a 0); /*线性渐变的宽度*/ background-size:15px 100%; }
结果：
实现了纵向的条纹，下面来试试斜向的条纹：要用角度background:linear-gradient(45 deg......)
#div4{ margin-top: 100px; width: 100px; height: 100px; background: linear-gradient(45deg, #fb3 50%,#58a 0); }
运行结果：
这不是我们想要的结果，再试试给背景加上尺寸：
#div4{ margin-top: 100px; width: 100px; height: 100px; background: linear-gradient(45deg, #fb3 50%,#58a 0); /*线性渐变的宽度*/ background-size:100% 15px; }
结果：
还是没有达到我们的要求，再改变背景的尺寸设置：
#div6{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变，渐变占了60%*/ background: linear-gradient(45deg, #fb3 50%,#58a 0); /*线性渐变的宽度*/ background-size:15px 15px; }
结果：
虽然还没有看见斜纹背景，但是我们已经看到利用背景渐变实现的多种图案了，从上图中看出一点规律，要实现斜纹背景 ，还要引入其他颜色：
#div7{ margin-top: 100px; width: 100px; height: 100px; background: linear-gradient(45deg, #fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0); }
终于出现了，设置个尺寸：
#div7{ margin-top: 100px; width: 100px; height: 100px; /*设置背景渐变，渐变占了60%*/ background: linear-gradient(45deg, #fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0); /*线性渐变的宽度*/ background-size:30px 30px; }
背景条纹就大功告成了，以后可以自己绘制条纹背景啦！！！
原文：http://www.cnblogs.com/hongxuejiao/p/4858546.html