用css实现条纹背景

我先额外的说一下怎么用CSS绘制三角形：

绘制三角形是把边框加粗，将元素的宽高都设为0，让其余的边框颜色透明，下面我们来看实现的代码：

先把边框的颜色设置成不同颜色：

 #div{
            border-color: red blue green pink;
            border-style: solid;
            border- 80px;
             0;
        }
       
         

显示的结果如下：

设置元素的三个边颜色透明，边框颜色默认：

 #div1{
            border-style: solid;
            border- 80px;
             0;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;

        }

结果如下：

这样就实现了CSS画三角形。

灵活的运用CSS，可以实现很多的功能，下面我来说说怎么用CSS来绘制背景条纹：

这里要用到背景的线性渐变:background:linear-gradient

1.背景渐变：

 #div2{
            margin-top: 100px;
             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;
             100px;
            height: 100px;
            /*设置背景渐变*/
            background: linear-gradient(#fb3 30%,#58a 0,#58a 70%,yellow 0);

          

给背景加上尺寸的限制：

 #div2{
            margin-top: 100px;
             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;
             100px;
            height: 100px;
            /*设置背景渐变*/
            background: linear-gradient(to right,
            #fb3 50%,#58a 0);
          

运行结果如下：

同样也给他一个尺寸限制：

 #div3{
            margin-top: 100px;
             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;
             100px;
            height: 100px;
            background: linear-gradient(45deg,
            #fb3 50%,#58a 0);
         } 

运行结果：

这不是我们想要的结果，再试试给背景加上尺寸：

 #div4{
            margin-top: 100px;
             100px;
            height: 100px;
            background: linear-gradient(45deg,
            #fb3 50%,#58a 0);
            /*线性渐变的宽度*/
            background-size:100% 15px;
        } 

结果：

还是没有达到我们的要求，再改变背景的尺寸设置：

#div6{
            margin-top: 100px;
             100px;
            height: 100px;
            /*设置背景渐变，渐变占了60%*/
            background: linear-gradient(45deg,
            #fb3 50%,#58a 0);
            /*线性渐变的宽度*/
            background-size:15px 15px;
        }

结果：

虽然还没有看见斜纹背景，但是我们已经看到利用背景渐变实现的多种图案了，从上图中看出一点规律，要实现斜纹背景 ，还要引入其他颜色：

 #div7{
            margin-top: 100px;
             100px;
            height: 100px;
            background: linear-gradient(45deg,
            #fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
          
        }

终于出现了，设置个尺寸：

#div7{
            margin-top: 100px;
             100px;
            height: 100px;
            /*设置背景渐变，渐变占了60%*/
            background: linear-gradient(45deg,
            #fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
            /*线性渐变的宽度*/
            background-size:30px 30px;
        } 

背景条纹就大功告成了，以后可以自己绘制条纹背景啦！！！