效果如下：
css3实现优惠券
知识储备
- 颜色渐变 linear-gradient()
- css伪类 :before :after
index.wxss
.app {
/* padding: 20rpx 40rpx; */
padding: 20rpx;
background: #eee;
}
.wrapper {
margin: 0 auto;
width: 100%;
display: flex;
background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));
/*实现颜色渐变 */
}
/*前半部分样式*/
.content {
position: relative;
flex: 1;
padding: 20rpx 30rpx;
text-align: center;
}
/*后半部分样式*/
.tip {
position: relative;
padding: 50rpx 30rpx;
flex: 0 0 200rpx;
text-align: center;
}
/*中间竖直虚线样式*/
.split-line {
position: relative;
flex: 0 0 0;
margin: 0 10rpx 0 6rpx;
border-left: 4rpx dashed #eee;
}
/*给虚线加两个伪类，基本样式如下*/
.split-line:before, .split-line:after {
content: '';
position: absolute;
width: 32rpx;
height: 16rpx;
background: #eee;
left: -18rpx;
z-index: 1;
}
/*给前半部分加两个伪类，基本样式如下*/.content:before, .content:after{
content: '';
position: absolute;
width: 32rpx;
height: 16rpx;
background: #eee;
left: -16rpx;
z-index: 1;
}
/*给前半部分加两个伪类，基本样式如下*/
.tip:before, .tip:after{
content: '';
position: absolute;
width: 32rpx;
height: 16rpx;
background:#eee;
right: -16rpx;
z-index: 1;
}
/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
.content:before, .tip:before, .split-line:before{
border-radius: 0 0 16rpx 16rpx;
top: 0;
}
/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/
.content:after, .tip:after, .split-line:after{
border-radius: 16rpx 16rpx 0 0;
bottom: 0;
}
.money {
font-size: 110rpx;
color: #eee;
}
.money text {
font-size: 50rpx;
padding-right: 20rpx;
}
.title {
color: #eee;
font-size: 30rpx;
}
.conditions {
color: #eee;
font-size: 30rpx;
padding:15rpx;
}
.useNow {
color: rgba(254,50,103,1);
font-size: 30rpx;
border-radius: 50rpx;
border-style: none;
}
.co {
padding-top:10rpx;
}
.co .co_w {
width: 64rpx;
height: 1rpx;
background: #fff;
margin-left: 60rpx;
margin-bottom: -20rpx;
}
.co .co_l {
width: 64rpx;
height: 1rpx;
background: #fff;
margin-left: 260rpx;
margin-top: -15rpx;
}
index.wxml
<view class="app">
<view class="wrapper">
<view class="content">
<view class="money">
<text>¥</text>50
</view>
<view class='co'>
<view class='co_w'></view>
<view class="title">
优惠券
</view>
<view class='co_l'></view>
</view>
</view>
<view class="split-line"></view>
<view class="tip">
<view class="conditions">
满500元使用
</view>
<button class="useNow" bindtap="">
立即使用
</button>
</view>
</view>
</view>