純css實現各種三角形圖案

一、前言

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

 

二、實現

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; }

原文章來源：  https://www.cnblogs.com/chengxs/p/11406278.html