优惠券样式：
代码马上送上：
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; }
