纯css实现一个带箭头阴影的手风琴动效

效果如图：

可以移入展开。

特征：
1，带有箭头
2，箭头处带有阴影
3，有交互操作

箭头，可以用border来实现：

width: 0;
height: 0;
border: 190px solid transparent;
border-left: 60px solid transparent;

引用可用box-shadow实现，但是如果是贴合非规则图形的阴影，可以用到滤镜：

filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2));

交互：当前放大，其他兄弟节点渐入透明

.parent{
    .child{
        opation: 1
    }
    &:hover{
        .child{
            opation: .2;
            &:hover{
                opation: 1
            }
        }
    }
}

代码：vue3
demo.vue