SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf8">
	<style>
		body {
			display: flex;
			flex-wrap: wrap;
		}

		.coupon {
			display: inline-flex;
			color: white;
			position: relative;
			padding-left: .5rem;
			padding-right: .5rem;
			margin: 1rem;
			/** 弧度得用rem来计数，不能用%号，因为%是用来计数高度和宽度的 */
			border-top-right-radius: .3rem;
			border-bottom-right-radius: .3rem;
			overflow: hidden;
		}

		.coupon-yellow {
			background-color: #F39B00;
		}

		.coupon-yellow-gradient {
			background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
		}

		.coupon-red-gradient {
			background-image: linear-gradient(150deg, #D24161 50%, #D24161D8 50%);
		}

		.coupon-green-gradient {
			background-image: linear-gradient(150deg, #7EAB1E 50%, #7EAB1ED8 50%);
		}

		.coupon-blue-gradient {
			background-image: linear-gradient(150deg, #50ADD3 50%, #50ADD3D8 50%);
		}

		/** 左边框波浪 **/
		.coupon-wave-left::before,
		.coupon-wave-right::after {
			content: '';
			position: absolute;
			top: 0;
			height: 100%;
			width: 14px;
			background-image: radial-gradient(white 0, white 4px, transparent 4px);
			/** 若只设置为r（半径）的两倍(直径)，则半圆之间没有类似堤岸的间隔 */
			background-size: 14px 14px;
			background-position: 0 2px;
			background-repeat: repeat-y;
			z-index: 1;
		}

		.coupon-wave-left::before {
			left: -7px;
		}

		.coupon-wave-right::after {
			right: -7px;
		}

		.coupon-info {
			padding-left: 1rem;
			padding-right: 1rem;
			padding-top: 1rem;
			padding-bottom: 1.5rem;
			position: relative;
			min-width: 15rem;
		}

		.coupon-info-right-dashed {
			border-right: 2px dashed white;
		}

		.coupon-info-right-solid {
			border-right: 2px solid white;
		}

		/** 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好使用） **/
		.coupon-hole::before,
		.coupon-hole::after {
			content: '';
			width: 1rem;
			height: 1rem;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			right: -.5rem;
		}

		.coupon-info::before {
			top: -.5rem;
		}

		.coupon-info::after {
			bottom: -.5rem;
		}

		.coupon-info>div {
			margin-bottom: .2rem;
		}

		.coupon-price {
			font-size: 250%;
			font-weight: bold;
		}

		.coupon-price>span {
			font-size: 40%;
			margin-left: .5rem;
			font-weight: normal;
		}

		.coupon-get {
			padding: 1rem;
			/** 这里使用flex是为了让文字居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			min-width: 5rem;
			position: relative;
		}

		.coupon-get>.coupon-desc {
			font-size: 150%;
			margin-bottom: .5rem;
			font-weight: bold;
		}

		.coupon-get-already::after {
			content: '';
			width: 5rem;
			height: 5rem;
			background-size: 5rem 5rem;
			background-image: url('data:image/png;base64,iVBORw0I=');
			position: absolute;
			top: -1rem;
			right: -1rem;
		}
	</style>
</head>

<body>
	<div class="coupon coupon-wave-left coupon-yellow">
		<div class="coupon-info coupon-hole coupon-info-right-dashed">
			<div class="coupon-price">¥5.00</div>
			<div class="coupon-desc">5元优惠券满50.00元使用</div>
			<div class="coupon-expiry-date">有效期：2019.10.01-2019.10.30</div>
		</div>
		<div class="coupon-get coupon-get-already">立即领取</div>
	</div>

	<div class="coupon coupon-yellow">
		<div class="coupon-info coupon-wave-right">
			<div class="coupon-price">¥5.00</div>
			<div class="coupon-desc">5元优惠券满50.00元使用</div>
			<div class="coupon-expiry-date">有效期：2019.10.01-2019.10.30</div>
		</div>
		<div class="coupon-get">立即领取</div>
	</div>

	<div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">
		<div class="coupon-info coupon-info-right-dashed">
			<div class="coupon-store">XXXXXX旗舰店</div>
			<div class="coupon-price">¥5.00<span>优惠券</span></div>
            <div class="coupon-description">订单满50.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc">副券</div>
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>
        </div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-red-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">XXXXXX旗舰店</div>
            <div class="coupon-price">¥10.00<span>优惠券</span></div>
            <div class="coupon-description">订单满100.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc">副券</div>
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>
        </div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-green-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">XXXXXX旗舰店</div>
            <div class="coupon-price">¥20.00<span>优惠券</span></div>
            <div class="coupon-description">订单满200.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc">副券</div>
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>
        </div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
        <div class="coupon-info coupon-info-right-dashed">
            <div class="coupon-store">XXXXXX旗舰店</div>
            <div class="coupon-price">¥50.00<span>优惠券</span></div>
            <div class="coupon-description">订单满300.00元</div>
        </div>
        <div class="coupon-get">
            <div class="coupon-desc">副券</div>
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>
        </div>
    </div>
    </body>
    </html>