成果如图：
能够移入开展。
特色：
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
<template> <div class="step"> <div class="item" v-for="item in list"> <div class="content"> <h2> <Ellipsis> {{ item.count }} <small>项</small> </Ellipsis> </h2> <h3> <Ellipsis> {{ item.title }} </Ellipsis> </h3> <Ellipsis class="desc"> {{ item.desc }} </Ellipsis> </div> </div> </div></template><script setup>const list = [ { count: 13, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 17, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 12, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 38, title: '测试的题目啊', desc: '测试的内容测试的内容' },]</script><style scoped lang="scss">.step { display: flex; align-items: stretch; overflow: hidden; position: relative; .item { width: 25%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; height: 375px; color: #fff; filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2)); z-index: 0; transition-duration: .3s; cursor: default; .content { position: absolute; left: 0; top: 0; z-index: 0; transition-duration: .3s; height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-left: 20%; } &:before { content: ''; display: block; position: absolute; z-index: 0; width: 0; height: 0; right: -249px; border: 190px solid transparent; border-left: 60px solid transparent; pointer-events: none; } &:nth-child(1) { background-color: #7C97CA; z-index: 3; &:before { border-left-color: #7C97CA; } } &:nth-child(2) { background-color: #5F7CB2; z-index: 2; &:before { border-left-color: #5F7CB2; } } &:nth-child(3) { background-color: #5771A0; z-index: 1; &:before { border-left-color: #5771A0; } } &:nth-child(4) { background-color: #294A87; z-index: 0; } h2 { font-size: 80px; font-weight: bold; color: #FFFFFF; line-height: 117px; margin: 0; transition-duration: .3s; small { font-size: 28px; font-weight: 400; color: #FFFFFF; line-height: 45px; transition-duration: .3s; } } h3 { font-size: 36px; font-weight: 400; color: #FFFFFF; line-height: 56px; margin: 0; transition-duration: .3s; } .desc { margin-top: 14px; font-size: 24px; font-weight: 300; color: #FFFFFF; line-height: 33px; transition-duration: .3s; } }}.step { &:hover { .item { .content { opacity: .1; } &:hover { width: 40%; .content { padding-left: 30%; opacity: 1; } h2 { font-size: 100px; small { font-size: 32px; } } h3 { font-size: 40px; } .desc { font-size: 24px; } } } }}</style>