您现在的位置是：首页 > 文章详情

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

日期：2020-10-22点击：565收藏

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

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