伪元素after实现三角形

   空心三角箭头

.triangle::after {
      position: absolute;
      content: '';
      width: 100px;
      height: 100px;
      border-right: 1px solid #f00;
      border-bottom: 1px solid #f00;
      transform: rotate(-45deg);
    }

实心三角形

.triangle::before {
      position: absolute;
      content: '';
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 100px solid #f00;
    }