写页面时候遇到一个效果，
![]()
这是很常见的一个tab切换，但是样式上不是常见的矩形，以前这类特殊形状都是UI切图，改变两张背景图来实现。
但这次没给切图，css有啥不能实现的呢。
实现方法
这里写的小程序的项目，但是布局上小程序和web页面大同小异，仅仅是标签不一样而已。
不同于矩形的直角直线，这里效果上是圆角加斜线，一个容器是无法实现的，可以使用伪类构建一个平行四边形，再做拼接。
代码如下：
<view class="tabs"> <view class="tabItem tabLeft" wx:if="{{curTabId==='0'}}"> <view class="leftItem" data-id="0" bindtap="switchTab">样品详情</view> <view class="rightItem" data-id="1" bindtap="switchTab">发票信息</view> </view> <view class="tabItem tabRight" wx:if="{{curTabId==='1'}}"> <view class="leftItem" data-id="0" bindtap="switchTab">样品详情</view> <view class="rightItem" data-id="1" bindtap="switchTab">发票信息</view> </view></view>
.tabs { width: 100%; height: 86rpx; border-bottom: 1px solid #EBECF1;}.tabs .tabItem { width: 100%; height: 100%; display: flex; background-color: #EBECF1;}
.tabLeft .leftItem { width: 460rpx; height: 100%; background-color: #fff; position: relative; display: flex; align-items: center; justify-content: center; color: #C6000D; font-size: 28rpx;}.tabLeft .leftItem::after { content: ""; position: absolute; top: 0; right: -30rpx; width: 75rpx; height: 86rpx; transform: skew(22deg); border-top-right-radius: 20rpx; background-color: #fff; color: #666;}.tabLeft .rightItem { flex: 1; display: flex; align-items: center; justify-content: center; border-top-right-radius: 20rpx; font-size: 26rpx;}
.tabRight .rightItem { width: 460rpx; height: 100%; background-color: #fff; position: relative; display: flex; align-items: center; justify-content: center; color: #C6000D; font-size: 28rpx;}.tabRight .rightItem::after { content: ""; position: absolute; top: 0; left: -30rpx; width: 75rpx; height: 86rpx; transform: skew(-22deg); border-top-left-radius: 20rpx; background-color: #fff; color: #666;}.tabRight .leftItem { flex: 1; display: flex; align-items: center; justify-content: center; border-top-right-radius: 20rpx; font-size: 26rpx;}
其中关键是使用了shew()函数实现了平行四边形。这属于css3中内容，使用较少，感觉就很陌生。
shew()函数
MDN中有说明，skew() 函数定义了一个元素在二维平面上的倾斜转换。
这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
![]()
skew(ax, ay) 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
ax 是一个 <angle>，表示用于沿横坐标扭曲元素的角度；ay 是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度，如果未定义，则其默认值为0，导致纯水平倾斜。
这里提一下GIF中第三例，turn这个单位。turn表示圆的一圈，90度是四分之一圆，也就是0.25turn。
transform属性
shew()函数是transform属性的值，transform有很多值，它允许盒模型定位的块状元素进行旋转，缩放，倾斜或平移。
![]()
