需要实现的效果实现思路利用tab页的before和after属性添加tab页前后的圆弧属性同时使用tab页的shadow阴影填充右下角的圆弧空缺部分。Tabs onChange{onChange} typecard 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); // 重点 } } }