挑战你样式的能力，你能想到选项卡切换的圆角用样式的代码来实现吗？设计完成后导出即源码，无需要自己编写CSS样式代码。当然这样的效果用图片来实现是最简单的。因为样式来实现需要一些比较高阶写法。
大部分网友实现这样切换选项卡首先想到的是用图片来替换实现，因为样式要实现这样上圆角然后往下斜的样式相信很多人不会写这样的样式。
上圆角实现
上圆角实现一个圆角很多人都会写直接用border-top-right-radius来实现，但默认标签是四方的，要实现一人斜的效果就需要用到CSS高阶用法transform：skew。这个用法在实际应用场景不常用，大家经常会忘记怎么样用。
使用工具即轻松实现。
参照样式代码
.text7-clz {
border-bottom-left-radius: 0rpx;
bottom: 0rpx;
border-top-right-radius: 12rpx;
right: 0rpx;
background-color: #ffffff;
flex-shrink: 0;
transform: translate(20rpx, 0rpx) skew(16deg, 0deg);
overflow: hidden;
top: 0rpx;
width: 36rpx !important;
border-top-left-radius: 0rpx;
border-bottom-right-radius: 0rpx;
position: absolute;
}下圆角实现
下圆角实现就更巧妙了，估计很多人都不会想到用阴影来实现。首先把背景样式设置成了透明，设置一个下圆解。巧妙的地方在接下来实现，看我们怎么样使用样式代码来实现。
阴影样式设置成了跟左边完全一样的颜色，然后用绝对定位定位到了右下方。
核心代码如下
.text18-clz {
border-bottom-left-radius: 120rpx;
color: #ede9e9;
bottom: -2rpx;
border-top-right-radius: 0rpx;
right: -58rpx;
background-color: rgba(255, 255, 255, 0);
flex-shrink: 0;
box-shadow: -12rpx 2rpx 0rpx #ffffff;
overflow: hidden;
width: 36rpx !important;
border-top-left-radius: 0rpx;
border-bottom-right-radius: 0rpx;
position: absolute;
height: 36rpx !important;
}切换点击变换效果
同理设置更一边的效果。然后生成源码即可
保存源码至本地
<template>
<view class="container container329152">
<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex7-clz">
<!-- #ifdef MP-WEIXIN -->
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz"> </view>
<!-- #endif -->
<image src="/static/q.png" class="image3-size diygw-image diygw-col-0 image3-clz" mode="widthFix"></image>
<text class="diygw-col-0 text1-clz"> DIY可视化管理系统 </text>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex9-clz">
<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-end flex10-clz">
<view v-if="globalData.logintype != '1'" class="flex flex-wrap diygw-col-24 items-center flex12-clz">
<view class="flex flex-wrap diygw-col-12 items-stretch flex15-clz">
<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex16-clz">
<text class="diygw-text-line1 diygw-col-0 text9-clz"> 账号登录 </text>
<text class="diygw-text-line1 diygw-col-0 text-clz"> </text>
</view>
<text class="diygw-text-line1 diygw-col-0 text7-clz"> </text>
<text class="diygw-col-0 text18-clz"> </text>
</view>
<view class="flex flex-wrap diygw-col-12 items-stretch" @tap="navigateTo" data-type="codeFunction">
<view class="flex flex-wrap diygw-col-24 justify-center items-center flex18-clz">
<text class="diygw-text-line1 diygw-col-0 text8-clz"> 免密登录 </text>
</view>
</view>
</view>
<view v-if="globalData.logintype == '1'" class="flex flex-wrap diygw-col-24 items-center flex24-clz">
<view class="flex flex-wrap diygw-col-12 items-stretch" @tap="navigateTo" data-type="codeFunction">
<view class="flex flex-wrap diygw-col-24 justify-center items-center flex28-clz">
<text class="diygw-text-line1 diygw-col-0 text14-clz"> 账号登录 </text>
</view>
</view>
<view class="flex flex-wrap diygw-col-12 items-stretch flex25-clz">
<text class="diygw-col-0 text19-clz"> </text>
<text class="diygw-text-line1 diygw-col-0 text16-clz"> </text>
<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex26-clz">
<text class="diygw-text-line1 diygw-col-0 text15-clz"> 免密登录 </text>
<text class="diygw-text-line1 diygw-col-0 text17-clz"> </text>
</view>
</view>
</view>
</view>
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24 form-clz">
<u-form-item class="diygw-col-24 phone-clz" labelPosition="top" prop="phone">
<text class="diy-icon-mobilefill margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.phoneFocus" placeholder="请输入手机号" v-model="form.phone"></u-input>
</u-form-item>
<u-form-item v-if="globalData.logintype != '1'" class="diygw-col-24 password-clz" labelPosition="top" prop="password">
<text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.passwordFocus" placeholder="请输入密码" v-model="form.password" type="password" :password-icon="true"></u-input>
</u-form-item>
<u-form-item v-if="globalData.logintype == '1'" class="diygw-col-24 code-clz" labelPosition="top" prop="code">
<text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.codeFocus" placeholder="请输入验证码" v-model="form.code"></u-input>
<button @tap="getFormCodeCode" class="diygw-btn radius-xs gradual-green">{{ formData.codeTag }}</button>
</u-form-item>
<u-verification-code seconds="60" startText="获取验证码" ref="codeCodeRef" @change="changeFormCodeCode"></u-verification-code>
<view class="flex diygw-col-24 justify-end flex-nowrap flex1-clz">
<view class="flex flex-wrap diygw-col-0" @tap="navigateTo" data-type="page" data-url="/pages/null" data-redirect="1">
<text class="diygw-col-0"> 还没有账号？ </text>
<text class="diygw-col-0 text2-clz"> 注册 </text>
</view>
</view>
<text @click="submitForm" class="diygw-col-24 gradual-green text4-clz"> 登录 </text>
<view class="flex flex-wrap diygw-col-0 items-center flex3-clz">
<view class="flex flex-wrap diygw-col-0 items-center" @tap="navigateTo" data-type="agreeFunction">
<text v-if="globalData.agree == '1'" class="flex icon3 diygw-col-0 icon3-clz diy-icon-roundcheck"></text>
<text v-if="globalData.agree != '1'" class="flex icon2 diygw-col-0 icon2-clz diy-icon-round"></text>
<text class="diygw-col-0"> 登录即同意并接受 </text>
</view>
<text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="privacy" class="diygw-col-0 text11-clz"> 《隐私权政策》 </text>
<text class="diygw-col-0"> 和 </text>
<text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="user" class="diygw-col-0 text13-clz"> 《用户协议》 </text>
</view>
</u-form>
</view>
<!-- #ifdef -->
<view class="flex flex-wrap diygw-col-24 flex-direction-column">
<view class="flex flex-wrap diygw-col-24 items-center flex2-clz" @tap="navigateTo" data-type="agreeFunction">
<view class="flex diygw-col-0 line-clz">
<view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view>
</view>
<text class="diygw-col-0 text6-clz"> 第三方登录 </text>
<view class="flex diygw-col-0 line1-clz">
<view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-around items-center flex4-clz">
<image src="/static/wx1.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
<image src="/static/zfb.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image>
<image src="/static/wb.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
</view>
<!-- #endif -->
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { logintype: '0', agree: '0' },
tabIndex: 0,
formRules: {
phone: [
{
trigger: ['change', 'blur'],
required: true,
message: '手机号不能为空'
},
{
trigger: ['change', 'blur'],
message: '请输入11位的手机号码',
pattern: /^1[3-9]\d{9}$/
}
],
password: [
{
trigger: ['change', 'blur'],
required: true,
message: '密码不能为空'
}
],
code: [
{
trigger: ['change', 'blur'],
required: true,
message: '验证码不能为空'
}
]
},
form: {
phone: '',
password: '',
code: ''
},
formData: {
phoneFocus: false,
passwordFocus: false,
codeFocus: false,
codeTag: '获取验证码',
codeFlag: false
}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
},
methods: {
async init() {
await this.initResetform();
},
// 同意或不同意 自定义方法
async agreeFunction(param) {
let thiz = this;
//如果不同意，改为同意
this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
},
// 验证码登录或密码登录 自定义方法
async codeFunction(param) {
let thiz = this;
//如果1表示验证码登录，0表进密码登录
this.globalData.logintype = this.globalData.logintype == '1' ? '0' : '1';
},
// 发送短信验证码 自定义方法
async sendMsgFunction(param) {
let thiz = this;
this.formData.codeFlag = false;
if (!this.form.phone) {
this.showToast('手机号码不能为空');
//不给发送验证码
this.formData.codeFlag = false;
return;
}
let pattern = /^1[3-9]\d{9}$/;
if (!pattern.test(this.form.phone)) {
this.showToast('手机号码输入有误');
//不给发送验证码
this.formData.codeFlag = false;
return;
}
let http_url = '';
//配置后可删除下面的判断
if (!http_url) {
this.showToast('默认发送短信验证地址，配置后可删除此判断');
return;
}
let http_data = {
phone: this.form.phone
};
let http_header = {};
let data = await this.$http.post(http_url, http_data, http_header, 'json');
if (data.code == 0) {
this.showToast(data.msg);
return;
} else {
//修改为true
this.formData.codeFlag = true;
this.$refs.codeCodeRef.start();
this.showToast('验证码已发送');
}
},
tabSelect(index) {
this.tabIndex = index;
this.showToast('这里可以回调哟');
},
changeFormCodeCode(text) {
this.formData.codeTag = text;
},
getFormCodeCode() {
if (this.$refs.codeCodeRef.canGetCode) {
this.formData.codeFlag = true;
this.navigateTo({ type: 'sendMsgFunction' });
if (this.formData.codeFlag) {
this.$refs.codeCodeRef.start();
this.navigateTo({
type: 'tip',
tip: '获取验证码已发送'
});
}
} else {
this.navigateTo({
type: 'tip',
tip: '倒计时结束后再发送'
});
}
},
initResetform() {
this.initform = JSON.stringify(this.form);
//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
//this.form = this.$tools.changeRowToForm(row,this.form)
},
resetForm() {
this.form = JSON.parse(this.initform);
},
async submitForm(e) {
this.$refs.formRef?.setRules(this.formRules);
this.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {};
let url = '/apps/login/login';
if (this.globalData.agree != '1') {
this.showToast('请点击同意授权协议');
return;
}
param.logintype = this.globalData.logintype;
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.$session.setUser(res.data);
this.showToast(res.msg, 'success');
this.navigateTo({
type: 'page',
url: 'index'
});
} else {
this.showToast(res.msg, 'error');
}
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
}
};
</script>
<style lang="scss" scoped>
.flex7-clz {
padding-top: 80rpx;
padding-left: 10rpx;
padding-bottom: 40rpx;
padding-right: 10rpx;
}
.flex8-clz {
height: 120rpx;
}
.image3-clz {
flex-shrink: 0;
border-bottom-left-radius: 120rpx;
overflow: hidden;
width: 120rpx !important;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
height: 120rpx !important;
}
.image3-size {
height: 120rpx !important;
width: 120rpx !important;
}
.text1-clz {
margin-left: 10rpx;
padding-top: 10rpx;
font-weight: bold;
padding-left: 20rpx;
font-size: 32rpx !important;
padding-bottom: 10rpx;
margin-top: 0rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
padding-right: 20rpx;
}
.flex9-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.flex10-clz {
background-color: rgba(255, 253, 253, 0.29);
border-bottom-left-radius: 0rpx;
overflow: hidden;
font-size: 28rpx !important;
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 0rpx;
}
.flex12-clz {
flex: 1;
}
.flex15-clz {
z-index: 1;
}
.flex16-clz {
background-color: #ffffff;
padding-top: 10rpx;
border-bottom-left-radius: 0rpx;
overflow: hidden;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-left-radius: 12rpx;
border-top-right-radius: 0rpx;
border-bottom-right-radius: 0rpx;
padding-right: 10rpx;
}
.text9-clz {
margin-left: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.text-clz {
flex-shrink: 0;
border-bottom-left-radius: 12rpx;
overflow: hidden;
width: 40rpx !important;
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
background-image: linear-gradient(90deg, #21d4fd 0%, #b721ff 100%);
height: 8rpx !important;
}
.text7-clz {
border-bottom-left-radius: 0rpx;
bottom: 0rpx;
border-top-right-radius: 12rpx;
right: 0rpx;
background-color: #ffffff;
flex-shrink: 0;
transform: translate(20rpx, 0rpx) skew(16deg, 0deg);
overflow: hidden;
top: 0rpx;
width: 36rpx !important;
border-top-left-radius: 0rpx;
border-bottom-right-radius: 0rpx;
position: absolute;
}
.text18-clz {
border-bottom-left-radius: 120rpx;
color: #ede9e9;
bottom: -2rpx;
border-top-right-radius: 0rpx;
right: -58rpx;
background-color: rgba(255, 255, 255, 0);
flex-shrink: 0;
box-shadow: -12rpx 2rpx 0rpx #ffffff;
overflow: hidden;
width: 36rpx !important;
border-top-left-radius: 0rpx;
border-bottom-right-radius: 0rpx;
position: absolute;
height: 36rpx !important;
}
.flex18-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text8-clz {
margin-left: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.flex24-clz {
flex: 1;
}
.flex28-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text14-clz {
margin-left: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.flex25-clz {
z-index: 1;
}
.text19-clz {
border-bottom-left-radius: 0rpx;
color: #ede9e9;
bottom: -2rpx;
border-top-right-radius: 0rpx;
background-color: rgba(255, 255, 255, 0);
flex-shrink: 0;
box-shadow: 12rpx 2rpx 0rpx #ffffff;
overflow: hidden;
left: -58rpx;
width: 36rpx !important;
border-top-left-radius: 0rpx;
border-bottom-right-radius: 100rpx;
position: absolute;
height: 36rpx !important;
}
.text16-clz {
border-bottom-left-radius: 0rpx;
bottom: 0rpx;
border-top-right-radius: 0rpx;
background-color: #ffffff;
flex-shrink: 0;
transform: translate(-20rpx, 0rpx) skew(-16deg, 0deg);
overflow: hidden;
top: 0rpx;
left: 0rpx;
width: 36rpx !important;
border-top-left-radius: 12rpx;
border-bottom-right-radius: 0rpx;
position: absolute;
}
.flex26-clz {
background-color: #ffffff;
padding-top: 10rpx;
border-bottom-left-radius: 0rpx;
overflow: hidden;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-left-radius: 0rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 0rpx;
padding-right: 10rpx;
}
.text15-clz {
margin-left: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.text17-clz {
flex-shrink: 0;
border-bottom-left-radius: 12rpx;
overflow: hidden;
width: 40rpx !important;
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
background-image: linear-gradient(90deg, #21d4fd 0%, #b721ff 100%);
height: 8rpx !important;
}
.form-clz {
background-color: #ffffff;
}
.phone-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.password-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.code-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.flex1-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.text2-clz {
color: #39b54a;
}
.text4-clz {
padding-top: 20rpx;
border-bottom-left-radius: 120rpx;
color: #ffffff;
font-weight: bold;
letter-spacing: 6rpx !important;
padding-left: 10rpx;
font-size: 32rpx !important;
padding-bottom: 20rpx;
border-top-right-radius: 120rpx;
margin-right: 30rpx;
margin-left: 30rpx;
box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
overflow: hidden;
width: calc(100% - 30rpx - 30rpx) !important;
border-top-left-radius: 120rpx;
margin-top: 10rpx;
border-bottom-right-radius: 120rpx;
margin-bottom: 10rpx;
text-align: center;
padding-right: 10rpx;
}
.flex3-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.icon3-clz {
color: #39b54a;
}
.icon3 {
font-size: 40rpx;
}
.icon2-clz {
color: #39b54a;
}
.icon2 {
font-size: 40rpx;
}
.text11-clz {
color: #39b54a;
}
.text13-clz {
color: #39b54a;
}
.flex2-clz {
margin-left: 10rpx;
padding-top: 16rpx;
padding-left: 30rpx;
width: calc(100% - 10rpx - 10rpx) !important;
padding-bottom: 16rpx;
margin-top: 30rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
padding-right: 30rpx;
}
.line-clz {
flex: 1;
}
.text6-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.line1-clz {
flex: 1;
}
.flex4-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.image-size {
height: 80rpx !important;
width: 80rpx !important;
}
.image2-size {
height: 80rpx !important;
width: 80rpx !important;
}
.image1-size {
height: 80rpx !important;
width: 80rpx !important;
}
.container329152 {
background-image: url(/https/blog.csdn.net/static/login-bg.png);
background-position: top center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
独立使用简单扩展
<template>
<view class="container container329916">
<div class="tab-container">
<div class="tab-background"></div>
<div class="tab-content">
<div class="tab-list">
<div
v-for="tab in tabList"
:key="tab.id"
:class="['tab-item', { 'active': activeTab === tab.id }]"
@click="activeTab = tab.id"
>
<span class="tab-label">
{{ tab.label }}
</span>
<template v-if="activeTab === tab.id">
<div class="tab-edge left"></div>
<div class="tab-edge right"></div>
</template>
<template v-else>
<div class="tab-inactive-edge left"></div>
<div class="tab-inactive-edge right"></div>
</template>
</div>
</div>
</div>
</div>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
activeTab:0,
tabList: [
{ label: '登录', id: 0 },
{ label: '测试', id: 1 },
]
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
},
methods: {
async init() {
}
}
};
</script>
<style lang="scss" scoped>
.tab-container {
width: 100%;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
position: relative;
}
.tab-background {
position: absolute;
inset: 0;
transition: all 500ms ease-in-out;
border-radius: 0.75rem;
}
.tab-background.login {
background: linear-gradient(to right, #60a5fa, #a855f7);
}
.tab-background.test {
background: linear-gradient(to right, #4ade80, #60a5fa);
}
.tab-content {
position: relative;
z-index: 10;
}
.tab-list {
display: flex;
overflow: hidden;
background-color: #e2e8f8;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.tab-item {
flex: 1;
height: 62px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 600;
position: relative;
cursor: pointer;
color: rgba(37, 99, 235, 0.5);
}
.tab-item.active {
opacity: 1;
background-color: white;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
box-shadow: 24px 50px 0 #fff, -24px 50px 0 #fff;
color: #2563eb;
}
.tab-label {
display: inline-block;
transition: transform 300ms;
}
.tab-item.active .tab-label {
transform: scale(1.2);
}
.tab-edge {
position: absolute;
bottom: 0;
width: 12px;
height: 62px;
background-color: white;
}
.tab-edge.left {
left: -6px;
border-top-left-radius: 0.75rem;
transform: skew(-15deg);
}
.tab-edge.right {
right: -6px;
border-top-right-radius: 0.75rem;
transform: skew(15deg);
}
.tab-inactive-edge {
position: absolute;
bottom: 0;
width: 12px;
height: 62px;
background-color: #e2e8f8;
}
.tab-inactive-edge.left {
left: 6px;
border-bottom-left-radius: 0.75rem;
transform: skew(15deg);
}
.tab-inactive-edge.right {
right: 6px;
border-bottom-right-radius: 0.75rem;
transform: skew(-15deg);
z-index: 1;
}
.container329916 {
background-color: #e2e8f8;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
