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

原创
10/22 13:22
阅读数 3.6K

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

这是很常见的一个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源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
2
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
2
分享
返回顶部
顶部