CSS 三角型的實現原理

利用border來實現三角型

源碼地址

注意:須要設置width:0,height:0

• border的四個邊框能夠設置不一樣的顏色，存在4個三角

  border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow;``

• 從top開始取三角

border-top: 50px solid red; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent;

border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid yellow;

border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent;

border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid blue; border-right: 50px solid transparent;

• 設置三角邊框

div:nth-child(2) span{ content: ""; display: block; width: 0; height: 0; top: -36px; position: relative; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent; }

div:nth-child(2) span::before{ content: ""; display: block; width: 0; height: 0; position: absolute; top: -46px; left: -47px; border-top: 47px solid transparent; border-bottom: 47px solid yellow; border-left: 47px solid transparent; border-right: 47px solid transparent; }

• 直角三角形（只須要設置一個水平邊和一個垂直邊）

content:""; width:0; height:0; position:absolute;/或設置display:block/ border-left: 50px solid yellow; border-bottom: 100px solid green;

設置width/height能夠獲得梯形

position: absolute; /或者設置display: block，若爲inline類型，則爲三角形/ width: 41px; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid green; border-left: 30px solid transparent; border-right: 30px solid transparent;