CSS 绘制小箭头

image.png
wxml

<view class="arrow"></view>

wxss

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}

/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}

/*上*/
.arrow.top {
  transform: rotate(90deg);
}

/*左*/
.arrow.left {
  transform: rotate(180deg);
}

/*右*/
.arrow.right {
  transform: rotate(0deg);
}