低代码-挑战你样式的能力，你能想到选项卡切换的圆角用样式的代码来实现吗？

挑战你样式的能力，你能想到选项卡切换的圆角用样式的代码来实现吗？设计完成后导出即源码，无需要自己编写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="/https/blog.csdn.net/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 f