讨论这种优惠券的最佳CSS写法

Question

注：
1.背景灰色
2.优惠券有阴影，但缺口处阴影也需要缺口。希望阴影和圆角css可控。
3.希望中线位置css可控。

求：
最优切图及CSS方案。

Answer 1

大概实现了一下,水平有限
效果

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">
                满减优惠券
            </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>

Answer 2

难点就是虚线那一块，伪类加边框，应该OK

Answer 3

切图？

• 背景： background-color 。
• 阴影： box-shadow 好像是这个吧。
• 圆角： border-radius 。

Answer 4

虚线dashed?border-radius:50%;box-shadow:1px 1px 1px #333???要不就虚线那里切个背景图吧/摊手

Answer 5

优惠券分两大块，虚线用border
两个圆角用伪元素画出半圆,覆盖在border上

div
    div
    div

这样的结构应该就好了

Answer 6

用两层div，一层用来给灰色做背景，然后通过padding填充，里面那个div在设置白色背景，另外两个点可以用伪类定位，或者用两个i标签定位，虚线那个就不用说了吧…大概就这样的思路。

Answer 7

1、使用弹性布局把两头写好。
2、中间写一条竖线，然后用伪元素上下写两个和背景色一样的圆。

Answer 8

可以考虑使用 SVG 来绘制，再把 SVG 转 BASE64 后，内嵌到 css 中。

Answer 9

用CSS实现成本略高，各种方法都有潜在问题，要么让设计改形式，要么用切图

Answer 10

    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">满减优惠券</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>