純 CSS 實現繪製各類三角形（各類角度）

1、前言

三角形實現原理：寬度width爲0；height爲0；（1）有一條橫豎邊（上下左右）的設置爲border-方向：長度 solid red，這個畫的就是底部的直線。其餘邊使用border-方向：長度 solid transparent。（2）有兩個橫豎邊（上下左右）的設置，若斜邊是在三角形的右邊，這時候設置top或bottom的直線，和右邊的斜線。若斜邊是在三角形的左邊，這時候設置top或bottom的直線，和左邊的斜線。

 

2、實現

2.1 Triangle Up

#triangle-up {
    width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

 

2.2 Triangle Down

#triangle-down {
    width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

 

2.3 Triangle Left

#triangle-left {
    width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

 

2.4 Triangle Right

#triangle-right {
    width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

 

2.5 Triangle Top Left

#triangle-topleft {
    width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

 

2.6 Triangle Top Right

#triangle-topright {
    width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

 

2.7 Triangle Bottom Left

#triangle-bottomleft {
    width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }

 

2.8 Triangle Bottom Right

#triangle-bottomright {
    width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }