CSS特殊按钮样式

这一周除了折线图，就是这个样式比较恶心了，UI效果是这样的；

关键的css就只有两行：

transform:skewX(-30deg);
border-top-left-radius: 10rpx;

第一行是向右倾斜30度，第二行是左上角加一个圆角。

细节代码我也贴上来吧，权当作自己的笔记

<view class="welcome">
...
    <button class="submit"  formType="submit">
        <view class="max">今日满员</view>
        <view class="start-bg disable"></view>
    </button>
</view>

.welcome .submit{
color: #FF6C71;
border: 1rpx #FF6C71 solid;
width: 672rpx;
height: 96rpx;
margin: 20rpx auto 26rpx auto;
background-color: white;
position: relative;
line-height:96rpx;
}
.welcome button.submit::after{
border: none;
}
.welcome .submit .max{
font-size: 34rpx;
width: 180rpx;
position: absolute;
left: 0;
}
.welcome button.submit .disable{
background: -prefix-linear-gradient(left, #EB8A84, #978886);
background: linear-gradient(to right, #EB8A84, #978886);
}
.welcome .submit .start-bg{
background: -prefix-linear-gradient(left, #ffaf9a, #ff4c64);
background: linear-gradient(to right, #FF8D85, #ff4c64);
border-top-left-radius: 10rpx;
transform:skewX(-30deg);
width: 492rpx;
position: absolute;
right: -26rpx;
top: 0;
bottom: 0;
}
.welcome .submit .start{
font-size: 42rpx;
width: 492rpx;
color: white;
position: absolute;
right: -26rpx;
box-sizing: border-box;
}