使用css畫三角形

當代碼時下面這樣的時候，不知道你有沒有想過出現的圖形是什麼呢？

 .angle {
      width: 100px;
      height: 100px;
      border-bottom: 100px solid #c7ddef;
      border-top: 100px solid chartreuse;
      border-left: 100px solid chocolate;
      border-right: 100px solid #c9302c;
    }

運行結果以下：

 

若是這時候中間的框消失，是否是就構成了四個三角形？？

 .angle {
      width: 0px; //注意必定要是0而不能不寫，不寫的話系統默認的長款多是一整個屏幕，這是出現的就不是三角形了
      height: 0px;
      border-bottom: 100px solid #c7ddef;
      border-top: 100px solid chartreuse;
      border-left: 100px solid chocolate;
      border-right: 100px solid #c9302c;
    }

運行結果：

 

因此咱們能夠利用這一原理，將其餘的顏色的三角形換成透明色，最終顯示的就是三角形了

 

.angle {
      width: 0px;
      height: 0px;
      border-bottom: 100px solid transparent;
      border-top: 100px solid transparent;
      border-left: 100px solid transparent;
      border-right: 100px solid #c9302c;
    }

運行結果：

 

 注意：

1.若是須要其餘圖形的三角形，好比直角三角形：能夠將上面和右面邊框透明；

2.也能夠將左右/上下的邊框寬度調整來改變，好比：上下是100，左右是50來調整三角形的大小

.angle {
      width: 0px;
      height: 0px;
      border-bottom: 100px solid #c9302c;
      border-top: 100px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid #c9302c;
    }

 

 

除了經過CSS繪製三角形，H5新增的canvas也能夠用來繪製三角形

<canvas id="  san" width="300" height="400"></canvas>

var canvasSan = document.getElementById('san')
var contextSan = canvasSan.getContext('2d')
contextSan.beginPath()
//將畫筆移到x,y座標處
contextSan.moveTo(0,100)
contextSan.lineTo(300,100)
contextSan.lineTo(300,400)
contextSan.closePath()
contextSan.lineWidth = 2
contextSan.strokeStyle = "#F5270B"
contextSan.fill()//默認填充的顏色未黑色
contextSan.stroke()