css 邮票样式

造轮子一样的锯齿对称的邮票样式

css:

.dv-coup{text-align: center;}
.dv-600{width:600px;margin:auto;}
/* 横向 */
.coup{display: flex;position:relative;background:#d51d27;color:#fff;}
.coup-left{width:60%;}
.coup-inblock{display: inline-block;}
.coup-relative{position: relative;}
.right-inner{border-left:2px dashed rgba(255,255,255,.5);}
.coup-data{padding:10px 15px;}
.coup-circle{display:inline-block;width:16px;height:16px;background:#fff;position: absolute;left:-9px;border-radius:50%}
.coup-circle.coup-top{top:-8px;}
.coup-circle.coup-bottom{bottom:-8px;}
/* 纵向 */
.coup2{position:relative;box-shadow: rgba(0,0,0,0.2) 0 0 8px 3px;text-align: center;}
.coup2-top{padding:10px 15px;}
.coup2-bottom{padding:10px 15px;position: relative;border-top:1px dashed rgba(0,0,0,.3);}
.coup2-circle{width:16px;height:16px;background:#fff;border-radius:50%;position: absolute;top:-8px;}
.coup2-left{left:-9px;box-shadow:-3px 0 3px rgba(0,0,0,0.2) inset }
.coup2-right{right:-9px;box-shadow:3px 0 3px rgba(0,0,0,0.2) inset}

body:

<div class="dv-coup">
    <!-- 横向 -->
    <div class="coup dv-600">
        <div class="coup-inblock coup-left">
            <div class="coup-relative">
                <div class="coup-data">
                    <p>￥1000.00</p>
                    <p>优惠券</p>
                </div>
            </div>
        </div>
        <div class="coup-inblock">
            <div class="coup-relative right-inner">
                <div class="coup-data">
                    <p>截止日期</p>
                    <p>2019-10-26</p>
                </div>
                <i class="coup-circle coup-top"></i>
                <i class="coup-circle coup-bottom"></i>
            </div>
        </div>
    </div>
    <br><br><br>
    <!-- 纵向 -->
    <div class="coup2 dv-600">
        <div class="coup2-top">
            <div class="coup-data">
                <p>￥1000.00</p>
                <p>优惠券</p>
            </div>
        </div>
        <div class="coup2-bottom">
            <i class="coup2-circle coup2-left"></i>
            <i class="coup2-circle coup2-right"></i>
            <div class="coup-data">
                <p>截止日期</p>
                <p>2019-10-26</p>
            </div>
        </div>
    </div>
</div>

参考文章：

https://blog.csdn.net/lidysun/article/details/70156238