用css實現條紋背景

我先額外的說一下怎麼用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;
        } 

背景條紋就大功告成了，之後能夠本身繪製條紋背景啦！！！