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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。