CSS求教这种效果如何实现

Question

Answer 1

<template>
 <div>
 <ul class="ul-wrapper">
 <li
 @click="(is_active = n)&(top = (n-1) * 48 + 'px')"
 class="li-wrapper"
 v-for="n in 8" :key="n"
 >
 <span :class="{'li-active':n===is_active}" class="li-span">xxxxxxx{{n}}</span>
 </li>
 <li class="li-mask" :style="{top}" />
 </ul>
 </div>
</template>
<script>
 export default {
 name: "test",
 data() {
 return {
 is_active: 1,
 top: 0
 }
 } }</script>
<style scoped>
 .ul-wrapper {
 list-style: none;
 margin: 0;
 padding: 0;
 position: relative;
 width: max-content;
 overflow: hidden;
 }
 .li-wrapper {
 width: 200px;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 48px;
 list-style: none;
 color: #FFFFFF;
 box-sizing: border-box;
 background: #7436E6;
 text-decoration: none;
 cursor: pointer;
 } .li-span{
 position: relative;
 z-index: 2;
 transition: all .5s .25s ease-in-out; /* 延时动画 */ }
 .li-active {
 color: #7436E6 !important;
 }
 .li-mask {
 position: absolute;
 z-index: 1;
 margin-left: 10%;
 width: 90%;
 height: 48px;
 transition: all .5s ease-in-out;
 border-top-left-radius: 20px;
 border-bottom-left-radius: 20px;
 background: #FFFFFF;
 } .li-mask::before{
 content:'';
 position:absolute;
 height:1em;
 width:1em;
 right:0;
 top:-1em;
 border-bottom-right-radius:1em;
 box-shadow:1em 1em 0 1em #FFF;
 } .li-mask::after{
 content:'';
 position:absolute;
 height:1em;
 width:1em;
 right:0;
 bottom:-1em;
 border-top-right-radius:1em;
 box-shadow:1em -1em 0 1em #FFF;
 }</style>