小程序如何利用CSS画出箭头

小程序如何利用CSS画出箭头

如题,小程序空间有限，为了省图片，我们可以用wxss画箭头，这里画的是向下的箭头。

源码如下：

.right_arrow {
  height: 20rpx;
  line-height: 20rpx;
  position: relative;
  z-index: 4;
}
.right_arrow:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 2rpx;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: rgb(184, 107, 62) transparent transparent transparent ;
}

.right_arrow:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 50%;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
}

效果：

<view>
    <view class="right_arrow"></view>
    <view class="right_arrow"></view>
</view>

那么如何画其他方向的箭头呢？
修改before和after里的下面这一行即可,其他的自己适配:

border-color: rgba(255, 255, 255, 1) transparent transparent transparent;

比如画向右的箭头：

.right_arrow {
  height: 20rpx;
  line-height: 20rpx;
  position: relative;
  padding: 18rpx;
  z-index: 4;
}
.right_arrow:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: transparent transparent transparent rgba(255, 140, 0, 1);
}

.right_arrow:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 4rpx;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

参考：
https://blog.csdn.net/qq_22038259/article/details/84035674
https://blog.csdn.net/foreverling_ling/article/details/52796453
https://blog.csdn.net/danfengw/article/details/54140395