相信大家在購物的時候，經常看到各種選項，上面會有一個小小的三角形，實現這種三角形一般會想到是用圖片或者iconfont實現，然而其實這種三角形除了用圖片和iconfont，用css也可以實現。製作三角形的做法，主要是利用邊框做成的

觀察以下程式碼：

<template>
    <view>
        <view class="option">
            <view  v-for="(item,index) in option" :key="index"
                :class="item.current?'select':''"
 
 @click="choiceClick(index)">{{item.title}}
            </view>
        </view>
    </view>
</template>

js觸發點選事件choiceClick：

<script>
    export default {
        data() {
            return {
                option:[
                    {id:'1',title:'紅色',current:''},
                    {id:
 
'2',title:'藍色',current:''},
                    {id:'3',title:'白色',current:''},
                ],
            }    
        },
        methods: {
            choiceClick(index){
                console.log('index:',index)
                //多選
                this.option[index].current =!this.option[index].current;
                
 
//單選
                // this.option.forEach((item,i)=>{
                //     console.log('item:',item)
                //     console.log('i:',i)
                //     if(index==i){
                //         item.current=!item.current
                //     }else{
                //         item.current=false
                //     }
                // })
            }
        }
    }
</script>

css實現三角形，對勾√勾形：

<style>
    .option {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .option view {
        font-size: 30rpx;
        padding: 15rpx 0;
        color: #000;
        background-color: #f4f4f4;
        width: 165rpx;
        text-align: center;
        margin-top: 20rpx;
    }

    .option view.select {
        border: 1rpx solid #e0044d;
        position: relative;
        background: #fff;
    }
　　　/* 三角形 */
    .option view.select:after {
        content: "";
        position: absolute;
        bottom: 0rpx;
        right: 0rpx;
        border-bottom: 30rpx solid #e0044d;
        border-left: 30rpx solid transparent;
    }
　　 /* 對角√勾形 */
    .option view.select:before {
        content: '';
        position: absolute;
        width: 15rpx;
        height: 8rpx;
        background: transparent;
        bottom: 10rpx;
        right: 0rpx;
        border: 2rpx solid white;
        border-top: none;
        border-right: none;
        transform: rotate(-55deg);
        z-index: 9;
    }
</style>

單選效果：

多選效果：