無腦用CSS制作三角形及高級應用，看完別說你還不會！

CSS的高級用法

• 有時我們在開發中會遇到如下的需求：
  
• 觀察上面的圖片，我們看到第一張圖片手機京東下面有一個凸出盒子的三角形；第二張圖片紅色和白色有個斜線分割，那么我們怎么實作這種效果呢？看完這篇博客，別說你還不會！！！

CSS制作三角形

• 首先我們平常見到的盒子都是這個樣子的，
  

• 代碼實作：

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	margin: 100px auto;
    }
  

• 我們如果把盒子的邊框加寬呢？如果他的邊框寬度是50像素呢？就會變成下面的樣子，
  

• 代碼實作：

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid red;
    	margin: 100px auto;
    }
  

• 那如果我把四個邊框的顏色都改成不同的顏色呢？
  

• 代碼實作：

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• 看到這里小伙伴可能就有思路了，那我把盒子的寬和高變小一點呢？或者說直接沒有寬和高呢？

• 代碼實作：

    .box1 {
    	width: 50px;
    	height: 50px;
    	border:  50px solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• 代碼實作：

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• 看到這里，這三角形不就出來了嗎，沒錯，把其他三個邊框的顏色設定成透明色，這三角形不就正宗了嗎，
  

• 代碼實作：

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red transparent transparent transparent;
    	margin:  100px auto;
    }
  

總結：

• 三角形的模板如下：

    .box {
    	width: 0;
    	height: 0;
    	border: 40px solid transparent;
    	border-top-color: red;
    }
  

• 說明：

  1. 這種寫法和上面的寫法含義一樣，只不過更加簡潔，推薦使用，
  2. 三角形的大小只需要改變邊框的寬度，
  3. 三角形的方向需要修改top的值，可選的有top、bottom、left、right，
  4. 顏色修改border-top-color的值即可，

• 所以上面的凸出盒子的三角形用定位直接定位到大盒子的適當位置就可以了，也就實作了凸出盒子三角形的效果，

CSS三角形的高級用法

• 那么我們怎么制作這種效果呢？
  

• 其實它是由一個大盒子，里面裝著兩個小盒子（兩個小盒子高度和大盒子一樣），然后有一個直角三角形絕對定位到左邊盒子的右邊緣然后將顏色設定成和右面盒子一樣的顏色就可以了，
  
  

• 接下來我們分析如何寫出上圖中的小三角形，

• 首先看圖：
  

• 代碼實作：

    .box1 {
    	width : 0;
    	height: 0;
    	border-width: 50px;
    	border-style: solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
    
    下面的這種寫法和上面是等價的
  
    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 50px 50px 50px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin: 100px auto;
    }
  

• 我們把上邊框的寬度調高發現出現了如下圖案：
  

• 代碼實作：

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px 50px 50px;
    	border-style:  solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
  

• 看圖可知，最有可能變成我們目標三角形的是右邊的三角形，于是我們把下邊框的寬度調小直至為0，發現出現了我們想要的圖案，
  

• 代碼實作：

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• 于是我們把左邊框的寬度也設定為0像素，三角形就更加明顯了，
  

• 代碼實作：

    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 150px 50px Opx 0px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• 這時只需要把紅色三角形的顏色設定為透明色就可以了（注意，紅色的三角形是上邊框），效果如下，
  

• 代碼實作：

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px Opx opx;
    	border-style : solid;
    	border-color: transparent blue green black;
    	margin:  100px auto;
    }
  

總結：

• 藍色三角形的CSS代碼為：

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0 0;
    	border-style:  solid;
    	border-color: transparent blue transparent transparent;
    }
  

• 說明：

  1. 其中border-width的第一個引數設定的是三角形的高度，第二個引數設定的是三角形的寬度，
  2. 顏色可以在border-color中修改成想要的顏色，

• 因此只需要把小三角形絕對定位到左邊盒子的右邊，修改成適當的大小，顏色改為右邊盒子的顏色就可以實作那樣的需求了，

提示：
案例代碼中運用了許多的復合寫法，對此如果有不熟悉的伙伴可以看我的另一篇博客 - HTML，CSS中的復合寫法總結