CSS實現實心三角和空心三角

一次開發中遇到，記錄代碼

原理：

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: 2px;
  border-top: 89px solid transparent;
  border-right: 99px solid #FFFFFF;
  border-bottom: 99px solid transparent;
}

效果：