需要實現的效果

實現思路

利用tab頁的before和after屬性，添加tab頁前后的圓弧屬性，同時使用tab頁的shadow陰影填充右下角的圓弧空缺部分。

            <TabsonChange={onChange}type="card"items={getTabItems()}/>

.ant-tabs-nav{margin: 0;.ant-tabs-nav-list{display: flex;position: relative;z-index: 2;width: 100%;background: #E1E8F2;border-radius: 24px 24px 0 0;overflow: hidden; // 重點user-select: none;}.ant-tabs-tab{flex: 1;position: relative;display: flex;justify-content: center;align-items: center;height: 66px;padding: 18px 0;margin: 0;border: none;font-weight: 500;font-size: 22px;color: #606266;line-height: 30px;text-align: left;font-style: normal;border-radius: 24px 24px 0 0 !important;background: #E1E8F2;transition: none;user-select: none;&::before{content: '';position: absolute;left: 10px;bottom: 0;width: 32px;height: 66px;background: #E1E8F2;border-bottom-left-radius: 24px;transform: skewX(15deg); // 重點z-index: 4; }&::after{z-index: 4;content: '';position: absolute;right: 10px;bottom: 0;width: 32px;height: 66px;background: #E1E8F2;border-bottom-right-radius: 24px;transform: skewX(-15deg); // 重點}}.ant-tabs-tab-active{opacity: 1;z-index: 3; background: #ffffff;border-radius: 24px 24px 0 0 !important;box-shadow: 48px 42px 0 #ffffff, -48px 42px 0 #ffffff; // 重點user-select: none;&::before{content: '';position: absolute;left: -12px;bottom: 0;width: 24px;height: 66px;border-top-left-radius: 24px;background-color: #ffffff;transform: skewX(-15deg); // 重點}&::after{content: '';position: absolute;right: -12px;bottom: 0;width: 24px;height: 66px;border-top-right-radius: 24px;background-color: #ffffff;transform: skewX(15deg); // 重點}}}