效果图：

基础版：

GIF 2024-4-3 16-00-14.gif

需求分析：

1.左上角加勾勾

2.鼠标移动上钩子会隐藏

开始

1.在右上角画一个正方形

2.把左边和下面的border color隐藏

3.多加一个长方形把边框上边和左边的边框隐藏再旋转35度

基础版本代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .select {
            width: 200px;
            height: 200px;
            border-radius:10px ;
            position: relative;
            text-align: center;
            color: #29679A;
            background-color: tan;
            box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
        }

        .select:before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            border: 20px solid #13ce66;
            border-top-right-radius: 10px;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }

        .select:after {
            content: '';
            width: 4px;
            height: 10px;
            position: absolute;
            right: 7px;
            top: 4px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(35deg);
        }

        .select:hover::before {
            display: none;
        }
        .select:hover::after {
            display: none;
        }
    </style>
</head>

<body>
    <div class="select">
        图片
    </div>
    <img src="./icon/商陆花.png" class="select">
        <!-- 图片 -->
    </img>
</body>

</html>

问题来了伪类::after ::before对img元素不起作用

div换成了 img 却没有了伪类

解决：在外层套个div就好

进阶版 (加蒙层)

GIF 2024-4-3 17-18-49.gif

  <div class="image" v-for="(item, index) in  imageArr" :key="index">
        <div class="select">
            <span class="el-icon-view" @click="previewImg(index)"></span>
            <span v-if="!disabled" style="margin-left:10px;" class="el-icon-delete" @click="delIcon(index)"></span>
        </div>
        <img :style="{ height: uploadH + 'px', width: uploadW + 'px' }" :src="item" />
    </div>

image 是加蒙层的而select是加绿色勾勾的 so hover悬浮的时里面的查看大图和删除只能加到select里面了而不是image

css:

.image {
    display: inline-block;
    position: relative;
    margin-right: 14px;
    margin-bottom: 14px;
    border-radius: 6px;

    .select {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.3s;
        }
        &::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            border: 16px solid #13ce66;
            border-top-right-radius: 6px;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        &::after {
            content: '';
            width: 3px;
            height: 8px;
            position: absolute;
            right: 7px;
            top: 4px;
            border: 1px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(40deg);
        }
        &:hover::before,
        &:hover::after {
            display: none;
        }
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: all 0.3s;
        border-radius: 6px;
    }

    &:hover {
        &::before,
        span {
            opacity: 1;
        }
    }

    img {
        border-radius: 6px;
    }
}

最后：

愿各位在清明节这个特殊的时刻，心怀感恩，缅怀先祖，同时也能感受到生活的美好与安宁，祝大家清明节安康快乐！

模仿el-upload 图片右上角添加打勾