SOURCE

<div class="coupon">
	<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>
	</div>
</div>

<div class="coupon active">
	<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>
	</div>
</div>

body{background: #ccc}


.coupon {
    position: relative;
    width:345px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

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

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

.coupon-foot {
    position: relative;
    width:100%;
    height: 68px;
    border-radius: 0 0 13px 13px;
    background: radial-gradient(circle at 0% 21%, transparent 7%, #fff 7.2%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 21%, transparent 7%, #fff 7.2%) no-repeat right / 51% 100%;
    padding: 1px;
    padding-top: 0;
    margin-bottom: 10px;
    z-index: 1
    
}

.coupon-foot-wrap{
    position: relative;
    width:100%;
    height: 100%;
    border-radius:0 0 12px 12px;
    background: radial-gradient(circle at -.5% 21.4%, transparent 7.6%, #fff 7.8%) no-repeat left / 51% 100%, radial-gradient(circle at 100.5% 21.4%, transparent 7.6%, #fff 7.8%) no-repeat right / 51% 100%;
    padding: 1em;
    display: flex;
}
.coupon-foot-wrap::before {
    content:"";
    width: 92%;
    height: 1px;
    border-top: 2px dotted #F0F0F0;
    position: absolute;
    left: 4%;
    top: 20%;
    pointer-events: none;
}

/* 选中状态 */
.active .coupon-body{
    background: red;
}

.active .coupon-foot{
    background: radial-gradient(circle at 0% 21%, transparent 7%, red 7.2%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 21%, transparent 7%, red 7.2%) no-repeat right / 51% 100%;
}