纯css 实现三角形fold - unfold效果

鼠标未悬浮

鼠标悬浮

代码

html 部分

<div class="nav-box nav-item align-center flex nav-dropDown" @mouseleave="isHoverDropNav=false;" @mouseover="isHoverDropNav=true">
    <div class="flex">
        <div>服务介绍 <div class="active-line" style="left: -10px;"></div>
        </div>
        <i class="el-icon-arrow-down"></i>
    </div>
    <div class="nav-sub-box  bg-white  text-black round radius padding-sm text-df" v-show="isHoverDropNav">
        <p class="nav-sub-item">网课</p>
        <p class="nav-sub-item">一对一</p>
        <p class="nav-sub-item">招生服务</p>
    </div>
</div>

css部分

    .el-icon-arrow-down {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        align-self: center;
        font-size: 14px;
        font-weight: 800;
        margin-left: 5px;
    }

    .nav-dropDown:hover .el-icon-arrow-down {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        align-self: center;
        font-size: 14px;
        font-weight: 800;
        margin-left: 5px;
    }