边框上下凹陷

<view class="dd">
    <view class="d1"><text>￥<text>10</text></text></view>
    <view class="d2"><view class="top"></view><view class="xian"></view><view class="bottom"></view></view>
    <view class="d3"><text>全场家电满减券</text></view>
</view>

.dd{width : 290rpx; height : 120rpx; display : flex;}
.dd .d1,.d2,.d3{background-color : #f15622; height : 100%; color : #fff; display : flex; align-items : center; justify-content : center;}
.dd .d1{width : 160rpx; border-top-left-radius : 15rpx; border-bottom-left-radius : 15rpx; vertical-align : baseline;}
.dd .d1 text text{font-size : 45rpx;}
.dd .d2{width : 20rpx; display : flex; align-items : center; flex-direction : column;}
.d2 .top,.bottom{border-radius : 40%; background-color : #fff; height : 20rpx; width : 20rpx; position : relative;}
.d2 .top{top : -10rpx;}
.d2 .bottom{bottom : -10rpx;}
.dd .d2 .xian{height : 100rpx; width : 1rpx; border-left : 1rpx solid #C0C0C0;
opacity: 0.5;}
.dd .d3{width : 100rpx; text-align : center; padding-right : 10rpx;border-top-right-radius: 15rpx;border-bottom-right-radius: 15rpx;}
.dd .d3 text{font-size : 25rpx;}

image.png