skew()实现带圆角斜线效果

写页面时候遇到一个效果，

这是很常见的一个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。

90deg = 0.25turn

transform属性

shew()函数是transform属性的值，transform有不少值，它容许盒模型定位的块状元素进行旋转，缩放，倾斜或平移。

本文分享自微信公众号 - 前端一块儿学（gh_3ba18d51f982）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。