is probably realized. The level is limited
effect

css part

 

-sharpapp {
    width: 800px;
    padding: 50px;
    background: -sharpeee;
}
.wrapper {
    width: 600px;
    display: flex;
    background: -sharpfff;
    border-radius: 8px;
}
.content {
    flex: 1;
    padding: 20px;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 2px -sharpccc;
    background: -sharpfff;
}
.title {
    font-size: 24px;
}
.time {
    margin-top: 30px;
    font-size: 18px;
    color: -sharp9E9E9E;
}
.tip {
    position: relative;
    flex: 0 0 100px;
    text-align: center;
    color: -sharpff4242;
    padding: 20px;
    border-radius:0 8px 8px 0;
    box-shadow: 2px 2px 2px -sharpccc;
    background: -sharpfff;
}
.split-line {
    position: relative;
    flex: 0 0 0;
    border-left: 2px dashed -sharpeee;
    margin: 0 5px 0 3px;
    background: -sharpfff;
}
.split-line:before, .split-line:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 8px;
    background: -sharpeee;
    left: -9px;
    z-index: 1;
}
.split-line:before {
    border-radius: 0 0 8px 8px;
    top: 0;
}
.split-line:after {
    border-radius: 8px 8px 0 0;
    bottom: 0;
}
.money {
    font-weight: bold;
    font-size: 24px;
}
.pay-line {
    margin-top: 30px;
    font-size: 16px;
}

html part

<div id="app">
    <div class="wrapper">
        <div class="content">
            <div class="title">
                
            </div>
            <div class="time">
                : 2018-01-25
            </div>
        </div>
        <div class="split-line"></div>
        <div class="tip">
            <div class="money">
                $10
            </div>
            <div class="pay-line">
                1000
            </div>
        </div>
    </div>
</div>

the difficulty is the dotted line. If the pseudo-class is framed, it should be OK

cut the picture?

• background: background-color .
• Shadow: box-shadow looks like this.
• fillet: border-radius .

dotted line dashed?border-radius:50%;box-shadow:1px 1px 1px-sharp333? Why don't you cut a background image on the dotted line

the coupon is divided into two large pieces, and the dotted line is border
two fillets with pseudo elements to draw a semicircle, covering the border

div
    div
    div

such a structure should be fine

use two layers of div, and one layer to make a gray background, and then fill it with padding. The div inside is setting a white background, and the other two points can be located with pseudo-classes, or with two I tags, needless to say about the dotted line. This is probably the way of thinking.

1. Use flexible layout to write both ends.
2. Write a vertical bar in the middle, and then write two circles with pseudo elements that are the same as the background color.

consider using SVG to draw, and then convert SVG to BASE64 and embed it into css.

the cost of using CSS is slightly higher, and there are potential problems in all kinds of methods. Either let the design change the form or use cut

    li{
        list-style: none;
    }
    .bg-color{
        position: relative;
        width: 760px;
        height: 210px;
        background: -sharpeeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bg-color .box{
        width: 710px;
        height: 175px;
        background: -sharpfff;
        border-radius: 8px;
        box-shadow: -2px 2px 2px -sharpccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .sheep::before{
        content: '';
        width: 16px;
        height: 8px;
        background-color:-sharpeeeeee;
        z-index: 1;
        border-radius: 0 0 8px 8px;
        position: absolute;
        border-bottom:none;
        top: 0px;
        left: 0;
        left: -8px
    }
    .sheep:after{
        content: '';
        width: 16px;
        height: 12px;
        z-index: 1;
        background: -sharpeeeeee;
        border-radius: 12px 12px 0 0;
        position: absolute;
        border-bottom:none;
        bottom: -4px;
        left: -8px;
        
    }
    .box .box-l{
        padding: 0 30px;
    }
    .box .title{
        font-size: 35px;
        font-weight: bold;
        padding-bottom: 20px;
    }
    .box .time{
        font-size: 18px;
        color: -sharp9E9E9E;
    }
    .box .money{
        color: red;
        font-size: 25px;
        padding-bottom: 20px;
    }
    .box .discount{
        color: red;
        font-size: 25px;
    }
    .box .box-r{
        text-align: center;;
        padding: 0 30px;
    }
    .sheep{
        height: inherit;
        border-left: 2px dashed -sharpeee;
        position: absolute;
        left: 510px;
    }
    
    
    
    
    
    

<div class="bg-color">
        <div class="box">
                <ul class="box-l">
                    <li class="title"></li>
                    <li class="time">:2018-01-01</li>
                </ul>
                <div class="sheep"></div>
                <ul class="box-r">
                    <li class="money">55</li>
                    <li class="discount">1000</li>
                </ul>
        </div>
</div>