<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 }
大多为关键css,不是完整的图片中的代码,理解就行,搬运无果