1、使用彈性布局把兩頭寫好。
2、中間寫一條豎線，然后用偽元素上下寫兩個和背景色一樣的圓。

優(yōu)惠券分兩大塊，虛線用border
兩個圓角用偽元素畫出半圓,覆蓋在border上

div
    div
    div

這樣的結(jié)構(gòu)應該就好了

切圖？

• 背景： background-color 。
• 陰影： box-shadow 好像是這個吧。
• 圓角： border-radius 。

可以考慮使用 SVG 來繪制，再把 SVG 轉(zhuǎn) BASE64 后，內(nèi)嵌到 css 中。

大概實現(xiàn)了一下,水平有限
效果

css部分

 

#app {
    width: 800px;
    padding: 50px;
    background: #eee;
}
.wrapper {
    width: 600px;
    display: flex;
    background: #fff;
    border-radius: 8px;
}
.content {
    flex: 1;
    padding: 20px;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 2px #ccc;
    background: #fff;
}
.title {
    font-size: 24px;
}
.time {
    margin-top: 30px;
    font-size: 18px;
    color: #9E9E9E;
}
.tip {
    position: relative;
    flex: 0 0 100px;
    text-align: center;
    color: #ff4242;
    padding: 20px;
    border-radius:0 8px 8px 0;
    box-shadow: 2px 2px 2px #ccc;
    background: #fff;
}
.split-line {
    position: relative;
    flex: 0 0 0;
    border-left: 2px dashed #eee;
    margin: 0 5px 0 3px;
    background: #fff;
}
.split-line:before, .split-line:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 8px;
    background: #eee;
    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部分

<div id="app">
    <div class="wrapper">
        <div class="content">
            <div class="title">
                滿減優(yōu)惠券
            </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>

用CSS實現(xiàn)成本略高，各種方法都有潛在問題，要么讓設(shè)計改形式，要么用切圖

用兩層div，一層用來給灰色做背景，然后通過padding填充，里面那個div在設(shè)置白色背景，另外兩個點可以用偽類定位，或者用兩個i標簽定位，虛線那個就不用說了吧…大概就這樣的思路。

虛線dashed?border-radius:50%;box-shadow:1px 1px 1px #333???要不就虛線那里切個背景圖吧/攤手

難點就是虛線那一塊，偽類加邊框，應該OK

    li{
        list-style: none;
    }
    .bg-color{
        position: relative;
        width: 760px;
        height: 210px;
        background: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bg-color .box{
        width: 710px;
        height: 175px;
        background: #fff;
        border-radius: 8px;
        box-shadow: -2px 2px 2px #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .sheep::before{
        content: '';
        width: 16px;
        height: 8px;
        background-color:#eeeeee;
        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: #eeeeee;
        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: #9E9E9E;
    }
    .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 #eee;
        position: absolute;
        left: 510px;
    }
    
    
    
    
    
    

<div class="bg-color">
        <div class="box">
                <ul class="box-l">
                    <li class="title">滿減優(yōu)惠券</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>