CSS 生成空心三角形

<div class="triangle"></div>

第一种：

.triangle {
    border-right: 2px solid #27ab3d;
    border-top: 2px solid #27ab3d;
    height: 10px;
    width: 10px;
    margin:50px auto 0;
    -webkit-transform: rotate(228deg);
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
} 

第二种

.triangle {
     width: 20px;
     height: 4px;
     margin: 0 auto 7px;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-bottom: 4px solid #27ab3d;
     transform: rotate(45deg);
     transform-origin: left;
 }

  .triangle:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #27ab3d;
      position: absolute;
      right: -10px;
      top: -14px;
      transform: rotate(90deg);
      transform-origin: bottom;
  }

第三种：使用堆叠效果遮挡，从而产生空心三角形（ps：只能用于背景颜色和遮挡三角形颜色一致的情况）

.triangle {
    position: relative;
    height: 0px;
    width: 0px;
    border-top: 90px solid transparent;
    border-right: 100px solid black;
    border-bottom: 100px solid transparent;
}
.triangle :after {
    content: '';
    position: absolute;
    top: -89px;
    left: 2px;
    border-top: 89px solid transparent;
    border-right: 99px solid #FFFFFF;
    border-bottom: 99px solid transparent;
}