小程序如何利用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