css实现礼券效果

<template>
    <div class="demo">
        <div class="stamp stamp01">
            <div class="par">
                <p>XXXXXX折扣店</p>
                <sub class="sign">￥</sub>
                <span>50.00</span>
                <sub>优惠券</sub>
                <p>订单满100.00元</p>
            </div>
            <div class="copy">
                副券
                <p>
                    2015-08-13
                    <br>2016-08-13
                </p>
            </div>
            <i></i>
        </div>

        <div class="stamp stamp02">
            <div class="par">
                <p>XXXXXX折扣店</p>
                <sub class="sign">￥</sub>
                <span>50.00</span>
                <sub>优惠券</sub>
                <p>订单满100.00元</p>
            </div>
            <div class="copy">
                副券
                <p>
                    2015-08-13
                    <br>2016-08-13
                </p>
            </div>
            <i></i>
        </div>

        <div class="stamp stamp03">
            <div class="par">
                <p>XXXXXX折扣店</p>
                <sub class="sign">￥</sub>
                <span>50.00</span>
                <sub>优惠券</sub>
                <p>订单满100.00元</p>
            </div>
            <div class="copy">
                副券
                <p>
                    2015-08-13
                    <br>2016-08-13
                </p>
                <a href="#">立即使用</a>
            </div>
            <i></i>
        </div>

        <div class="stamp stamp04">
            <div class="par">
                <p>XXXXXX折扣店</p>
                <sub class="sign">￥</sub>
                <span>50.00</span>
                <sub>优惠券</sub>
                <p>订单满100.00元</p>
            </div>
            <div class="copy">
                副券
                <p>
                    2015-08-13
                    <br>2016-08-13
                </p>
                <a href="#">立即使用</a>
            </div>
            <i></i>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sampleValue: "111",
            value1: "",
            sampleValues: ""
        };
    }
};
</script>

<style>
.demo {
     410px;
}
.stamp * {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,
        monospace;
}

.stamp {
     387px;
    height: 140px;
    padding: 0 10px;
    margin-bottom: 50px;

    position: relative;
    overflow: hidden;
}
.stamp:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;

    z-index: -1;
}
.stamp:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
    z-index: -2;
}

.stamp i {
    position: absolute;
    left: 20%;
    top: 45px;
    height: 190px;
     390px;
    background-color: rgba(255, 255, 255, 0.15);
    transform: rotate(-30deg);
}
.stamp .par {
    float: left;
    padding: 16px 15px;
     220px;
    border-right: 2px dashed rgba(255, 255, 255, 0.3);
    text-align: left;
}
.stamp .par p {
    color: #fff;
    font-size: 16px;
    line-height: 21px;
}
.stamp .par span {
    font-size: 50px;
    color: #fff;
    margin-right: 5px;
    line-height: 65px;
}
.stamp .par .sign {
    font-size: 34px;
}
.stamp .par sub {
    position: relative;
    top: -5px;
    color: rgba(255, 255, 255, 0.8);
}
.stamp .copy {
    display: inline-block;
    padding: 21px 14px;
     100px;
    vertical-align: text-bottom;
    font-size: 30px;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: initial;
}
.stamp .copy p {
    font-size: 16px;
    margin-top: 15px;
}
.stamp01 {
    background: #f39b00;
    background: radial-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 5px,
        #f39b00 5px
    );
    background-size: 15px 15px;
    background-position: 9px 3px;
}
.stamp01:before {
    background-color: #f39b00;
}
.stamp02 {
    background: #d24161;
    background: radial-gradient(transparent 0, transparent 5px, #d24161 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}
.stamp02:before {
    background-color: #d24161;
}
.stamp03 {
    background: #7eab1e;
    background: radial-gradient(transparent 0, transparent 5px, #7eab1e 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}
.stamp03:before {
    background-color: #7eab1e;
}
.stamp03 .copy {
    padding: 10px 6px 10px 12px;
    font-size: 24px;
}
.stamp03 .copy p {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 8px;
}
.stamp03 .copy a {
    background-color: #fff;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
}

.stamp04 {
     390px;
    background: #50add3;
    background: radial-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 4px,
        #50add3 4px
    );
    background-size: 12px 8px;
    background-position: -5px 10px;
}
.stamp04:before {
    background-color: #50add3;
    left: 5px;
    right: 5px;
}
.stamp04 .copy {
    padding: 10px 6px 10px 12px;
    font-size: 24px;
}
.stamp04 .copy p {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 8px;
}
.stamp04 .copy a {
    background-color: #fff;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
}
</style>