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