css伪元素::before画箭头

向上箭头

.pre {
      position: relative;
      width: 100%;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
}

.pre::before {
      content: "";
      width: 12px;
      height: 12px;
      border: solid #fff;
      border-width: 2px 2px 0 0;
      transform: translate(-50%, -50%) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 70%;
}

向下箭头

.next {
      position: relative;
      width: 100%;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
}

.next::before {
      content: "";
      width: 12px;
      height: 12px;
      border: solid #fff;
      border-width: 0 0 2x 2px;
      transform: translate(-50%, -50%) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 70%;
}

向左箭头

.pre {
      position: relative;
      width: 100%;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
}

.pre::before {
      content: "";
      width: 12px;
      height: 12px;
      border: solid #fff;
      border-width: 2px 0 0 2px;
      transform: translate(-50%, -50%) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 70%;
}

向右箭头

.pre {
      position: relative;
      width: 100%;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
}

.pre::before {
      content: "";
      width: 12px;
      height: 12px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -50%) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 70%;
}