vue css 实现选中div 边框变色，右下角三角形

vue 文件 + ant  框架实现

<a-row type="flex" justify="space-around" class="paySelect" gutter="[16,16]">
          <a-col :span="6">
        <div class="payItem" :class="currentIndex === 0 ? 'active' : ''" @click="currentIndex = 0">
          <img src="../../../../assets/icons/wechat1.png" alt=""> <span>微信支付</span>
          <div class="selected" v-if="currentIndex === 0"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="payItem" :class="currentIndex === 1 ? 'active' : ''" @click="currentIndex = 1">
          <img src="../../../../assets/icons/alipay.png" alt=""> <span>支付宝支付</span>
          <div class="selected" v-if="currentIndex === 1"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="payItem" :class="currentIndex === 2 ? 'active' : ''" @click="currentIndex = 2">
          <img src="../../../../assets/icons/unionpay.png" alt=""> <span>银联支付</span>
          <div class="selected" v-if="currentIndex === 2"></div>
        </div>
      </a-col>
    </a-row>

css 部分

 .selected{
    border-color: red;
  }
  .selected:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 30px solid red;
    border-left: 30px solid transparent;
  }
  .selected:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    background: transparent;
    top: 30px;
    right: 1px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
    z-index: 9;
  }

js 部分

data() {
    return {
      currentIndex: 0
    }
  },

效果如图：