SOURCE

<div class="coupon">
	<div class="coupon-body">
		<div class="coupon-body-wrap"></div>
	</div>
	<div class="coupon-foot">
		<div class="coupon-foot-wrap">
			<div class="item">
				<p>
					<span>1</span>
                    <span>底部内容</span>
                </p>
                <p>222></p>
            </div>
		</div>
	</div>
</div>

<div class="coupon selected">
	<div class="coupon-body">
		<div class="coupon-body-wrap">
			这是文本这是文本 这是文本 这是文本
			<p>这是文本</p>
			<p>这是文本</p>
			<p>这是文本</p>
			<p>这是文本</p>
			<p>这是文本</p>
			<p>这是文本</p>
		</div>
	</div>
	<div class="coupon-foot">
		<div class="coupon-foot-wrap">
			<div class="item">
                <p>
                    <span>1</span>
                    <span>底部内容</span>
                </p>
                <p>222></p>
            </div>
		</div>
	</div>
</div>

body{background: #ccc}


.item {
    border-radius: 8px;
    background: red;
    height: 40px;
    flex:1;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.coupon {
    position: relative;
    width:340px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 13px;
}

.coupon * {
    box-sizing: border-box;
}

.coupon-body{
    position: relative;
    width:100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    background: #fff;
    padding-bottom: 0;
    margin-bottom: -1px;
    z-index: 0
}
.coupon-body-wrap{
    padding: 1em;
}

.coupon-foot {
    position: relative;
    width:100%;
    height: 68px;
    border-radius: 0 0 8px 8px;
    background: radial-gradient(circle at 0% 31%, transparent 7%, #fff 7.2%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 31%, transparent 7%, #fff 7.2%) no-repeat right / 51% 100%;
    margin-bottom: 10px;
    z-index: 1
    
}
.coupon-foot-wrap{
    position: absolute;
    width:100%;
    height: 80%;
    left: 0;
    bottom:0%;
    padding: 0 2em;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-bottom: 12%;
}


.selected .coupon-body{
    background: #E3F2FE;
}
.selected .coupon-foot {
    background: radial-gradient(circle at 0% 21%, transparent 7%, #E3F2FE 7.2%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 21%, transparent 7%, #E3F2FE 7.2%) no-repeat right / 51% 100%;
}
.selected .coupon-foot-wrap{
    position: absolute;
    border-radius:0 0 8px 8px;
    background: radial-gradient(circle at 0% 2%, transparent 7%, #fff 7.2%) no-repeat left / 51% 100%, radial-gradient(circle at 100% 2%, transparent 7%, #fff 7.2%) no-repeat right / 51% 100%;
    padding-bottom: 0;
}
.selected .coupon-foot-wrap::before{
    content:"";
    position: absolute;
    display: block;
    left: 3.85%;
    bottom: 90%;
    width: 92.3%;
    height: 10px;
    background: radial-gradient(circle farthest-side at 75.7% 71.5%, #fff 43%, rgba(255,255,155,0) 44%),linear-gradient(0deg, rgba(255,56,56,0) 50%, #E3F2FE 51%),radial-gradient(circle farthest-side at 25.5% 29%, #E3F2FE 43%, #fff 44%), #E3F2FE;
    background-size: 10px 10px;
    background-repeat: repeat-x;
    background-position: bottom;
}