一次開發中遇到，記錄程式碼

原理：

1.給一個div，寬和高都為0的時候，盒子什麼都沒有看起來。為空白

2.給一個寬高為0的盒子給一遍畫素給100px的上邊，下邊和右邊，

.jiao{
  position: relative;
//box-sizing: border-box;
height: 0px;
width: 0px;
//border: 10px solid red;
border-top: 90px solid red;
border-right: 100px solid black;
border-bottom: 100px solid blue;
}

這樣左邊沒有，就會縮成一個點

效果：

這是當把上下邊顏色都設定為透明色，就是一個實心定位三角形

.jiao{
  position: relative;height: 0px;
width: 0px;border-top: 90px solid transparent;
border-right: 100px solid black;
border-bottom: 100px solid transparent;
}

效果

這樣一個實心的三角新就出來了，

空心的三角形呢同理，在當前的三角形後面新增一個一個實心三角形，然後將這個三角形絕對定位到當前三角行的位置切割

.jiao:after{
  content: '';
position: absolute;
top: -89px;
left: 2
 
px;
border-top: 89px solid transparent;
border-right: 99px solid #FFFFFF;
border-bottom: 99px solid transparent;
}

效果：