css 画三角线图标

css箭头

1.向右箭头

.arrow {
      width: 10px;
      height: 10px;
      border: 1.5px solid #ffffff;
      border-left-width: 0;
      border-bottom-width: 0;
      transform: rotate(45deg);
    }

同理可以设置向左，向下，向上的箭头，主要是改变 transform: rotate(xx);的角度，以及border的哪个部分隐藏

2.向左箭头

.arrow {
      width: 10px;
      height: 10px;
      border: 1.5px solid #ffffff;
      transform: rotate(-45deg);
      border-right-width: 0;
      border-bottom-width: 0;
    }

3.向上箭头

.arrow {
      width: 10px;
      height: 10px;
      border: 1.5px solid #ffffff;
      transform: rotate(45deg);
      border-right-width: 0;
      border-bottom-width: 0;
    }

4.向下箭头

.arrow {
      width: 10px;
      height: 10px;
      border: 1.5px solid #ffffff;
      transform: rotate(-135deg);
      border-right-width: 0;
      border-bottom-width: 0;
    }