education-front/components/base/arrow.vue

<template>
  <view class="arrow">
    <view class="arrow-blank arrow-blank-top"></view>
    <view class="arrow-blank arrow-blank-bottom"></view>
  </view>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
  .arrow {
    position: relative;
    width: 28rpx;
    height: 32rpx;
    background-image: linear-gradient(to right, #A3BCEF, #4883F9);

    &-blank {

      position: absolute;
      left: 0;

      &-top {
        top: 0;
        border-top: 8rpx solid #FFFFFF;
        border-right: 14rpx solid #FFFFFF;
        border-bottom: 8rpx solid transparent;
        border-left: 14rpx solid transparent;
      }

      &-bottom {
        bottom: 0;
        border-top: 8rpx solid transparent;
        border-right: 14rpx solid #FFFFFF;
        border-bottom: 8rpx solid #FFFFFF;
        border-left: 14rpx solid transparent;
      }
    }    
  }
</style>