纯css写移动端流程图效果

考虑到直接贴图，不利于页面的加载和优化，所以我就自己动手，根据UI图写自己的css样式，最后和UI图对比完全和图片的样式一样了。不同屏幕都可以完美展现。

效果图：



html 代码：

<div class="chuguo-lc-wrap">
<ul class="lc-left">
<li>
<div class="lc-title">
01 前期咨询
</div>
<div class="lc-content font-14">
沟通咨询了解眼角膜移植相关内容
</div>
</li>
<li>
<div class="lc-title">
03 病例翻译
</div>
<div class="lc-content font-14">
整理病例资料并翻译传送相关医院
</div>
</li>
<li>
<div class="lc-title">
05 出国准备
</div>
<div class="lc-content font-14">
客人准备护照及出国签证相关资料
</div>
</li>
<li>
<div class="lc-title">
07 全程陪同
</div>
<div class="lc-content font-14">
当地工作人员全程接待根据约定的时间陪同
</div>
</li>
<li>
<div class="lc-title">
09 术后复查
</div>
<div class="lc-content font-14">
完成辅助检查，指导用药，治疗结束之后、回国定期复查
</div>
</li>
</ul>
<ul class="lc-right">
<li>
<div class="lc-title">
02 签订协议
</div>
<div class="lc-content font-14">
签署正规服务合同、支付相应款项
</div>
</li>
<li>
<div class="lc-title">
04 预约手术
</div>
<div class="lc-content font-14">
华印医疗与眼科中心预约手术时间
</div>
</li>
<li>
<div class="lc-title">
06 行程安排
</div>
<div class="lc-content font-14">
机票酒店预定以及出行前行程说明
</div>
</li>
<li>
<div class="lc-title">
08 手术安排
</div>
<div class="lc-content font-14">
前往相关医院问诊、术前检查、确定手术，安排手术
</div>
</li>
<li>
<div class="lc-title">
10 国内随访
</div>
<div class="lc-content font-14">
国内私人医生与国外医生保持沟通，定期随访
</div>
</li>
</ul>
</div>

css 代码如下：
.chuguo-lc-wrap{
margin-top:20px;
margin-left:10px;
margin-right:10px;
display:flex;
background:url(../images/jmyz-lc-bg.png) no-repeat center top;
background-size:auto 534px;
height:621px;
}
.chuguo-lc-wrap ul{
width:50%;
flex:1;
}
.chuguo-lc-wrap ul.lc-right{
margin-top:56px;
}
.chuguo-lc-wrap ul li{
position:relative;
height:95px;
margin-bottom:18px;
}
.chuguo-lc-wrap ul li .lc-title{
color:#fff;
background-color:#35516c;
width:83%;
position:absolute;
top:0;
left:0;
line-height:25px;
text-align:center;
z-index:9;
border-bottom:1px solid rgba(0,0,0,0.2);
box-shadow:0px 1px 2px rgba(0,0,0,0.5);
font-size:15px;
}
.chuguo-lc-wrap ul.lc-right li .lc-title{
top:0;
right:0;
left:auto;
}
.chuguo-lc-wrap ul.lc-left li .lc-title::before{
content:'';
width:0;
heigth:0;
border:5px solid #304859;
border-bottom-color:transparent;
border-left-color:transparent;
position:absolute;
bottom:-11px;
left:0;
}
.chuguo-lc-wrap ul.lc-right li .lc-title::before{
content:'';
width:0;
heigth:0;
border:5px solid #304859;
border-bottom-color:transparent;
border-right-color:transparent;
position:absolute;
bottom:-11px;
right:0;
}
.chuguo-lc-wrap ul.lc-left li .lc-title::after{
content:'';
width:26px;
height:26px;
position:absolute;
border-radius:50%;
top:0;
right:-13px;
background:#35516c;
}
.chuguo-lc-wrap ul.lc-right li .lc-title::after{
content:'';
width:26px;
height:26px;
position:absolute;
border-radius:50%;
top:0;
left:-13px;
background:#35516c;
}
.chuguo-lc-wrap ul li .lc-content{
position:absolute;
top:0;
left:10px;
padding-top:34px;
width:70%;
padding-bottom:12px;
text-align:center;
box-shadow:0px 2px 2px rgba(0,0,0,0.4);
color:#333;
background-color:#f1f2f3;
padding-left:5px;
padding-right:5px;
}
.chuguo-lc-wrap ul.lc-right li .lc-content{
left:auto;
right:10px;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title{
background-color:#f6004b;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::before{
border:5px solid #ad003a;
border-bottom-color:transparent;
border-left-color:transparent;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::after{
background:#f6004b;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title{
background-color:#00b1b1;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::before{
border:5px solid #008183;
border-bottom-color:transparent;
border-left-color:transparent;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::after{
background:#00b1b1;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title{
background-color:#4a90e2;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::before{
border:5px solid #2a5f9c;
border-bottom-color:transparent;
border-left-color:transparent;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::after{
background:#4a90e2;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title{
background-color:#417505;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::before{
border:5px solid #335906;
border-bottom-color:transparent;
border-left-color:transparent;
}
.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::after{
bac
4000
kground:#417505;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title{
background-color:#ffcc00;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::before{
border:5px solid #efa100;
border-bottom-color:transparent;
border-right-color:transparent;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::after{
background:#ffcc00;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title{
background-color:#005d8e;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::before{
border:5px solid #034c7b;
border-bottom-color:transparent;
border-right-color:transparent;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::after{
background:#005d8e;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title{
background-color:#d94135;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::before{
border:5px solid #a53626;
border-bottom-color:transparent;
border-right-color:transparent;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::after{
background:#d94135;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title{
background-color:#6d219b;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::before{
border:5px solid #4e3675;
border-bottom-color:transparent;
border-right-color:transparent;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::after{
background:#6d219b;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title{
background-color:#ab6b42;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::before{
border:5px solid #744224;
border-bottom-color:transparent;
border-right-color:transparent;
}
.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::after{
background:#ab6b42;
}