css 优惠券波浪线效果

<ul>
    <li>
        <i class="left"></i><span class="center"></span><i class="right"></i>
    </li>
    ...
</ul>

li {
　　position:relative;
　　line-height: 30px;
}
i {
　　position: absoute;
　　top:0;
　　width:2.5px;
　　height: 100%;
　　background-repeat: repeat-y, repeat-y;
　　background-size: 0.5rem 0.5rem !important;
}
.left{
    left: 0;
}
.right{
    right: 0;
    transform: scale(-1, 1);
}
.center{
    display:inline-block;
    height:30px;
    border-style: solid;
    border-width: 1px 0;
    border-color: #D2364C;
    color: #D2364C;
}

<ul>
    <li>
        <div class="yhq">
　　　　　　　<div class="yhq-left-border"></div>
　　　　　　　<div class="yhq--left-point"></div>　
            <div class="yhq-left">
                <div class="yhq-content"></div>
            </div>
            <div class="yhq-right">
                <div class="yhq-content"></div>
            </div>
            <div class="yhq--right-point"></div>
        </div>
    </li>
    ...
</ul>

.yhq {
　　border-width:1px 0;
　　border-style: solid;
　　border-color: #ff0000;
　　height:110px;
}
.yhq-left-border {
    position: absolute;
    top: 0.1rem;
    left: 0rem;
    width: 0.5rem;
    height: 0.25rem;
    height: 100%;
    background: linear-gradient(135deg, transparent, transparent 40%, #f00, transparent 60%, transparent 100%), 
linear-gradient(45deg, transparent, transparent 40%, #f00, transparent 60%, transparent 100%);
    background-size: 1rem 1.5rem;
}
.yhq-left-point,.yhq-right-point {
    position: absolute;
    top: 0.1rem;
    width: 0.9rem;
    height: 0.25rem;
    height: 100%;
    background: radial-gradient(circle, #333, #333 0.4rem, transparent 0.4rem);
    background-size: 1rem 1.5rem;
}
.yhq-left-point{
    left:-5px;
}
.yhq-right-point {
    right:-5px;
}
.yhq-left {
    position:relative;
    width:calc(100% - 70px)
    height: 110px;
    padding:20px;
}
.yhq-right {
    position:relative;
    width: 70px;
    height:110px;
    background:#ff000;
    padding:20px
}