纯css3写的步骤框_前端技术_日志_DTOP

纯css3写的步奏框

.step{ position:relative;}

.step a{ position:absolute; display:inline-block; color:#fff;}

.step a span{ display:inline-block; float:left;}

.step a .span_2{ text-align:center; line-height:40px;}

.step_first .span_1{ height:40px; width:180px; background:#c5c5c5; text-align:center; line-height:40px;}

.step_first .span_2{ width:0; height:0; line-height:0; font-size:0; border-left:20px solid #c5c5c5; border-top:20px solid transparent; border-bottom:20px solid transparent;}

.step_first:hover .span_1{ background:#6ec038;}

.step_first:hover .span_2{ border-left:20px solid #6ec038;}

.step_model span{ display:inline-block;}

.step_model .span_1{ width:0; height:0; line-height:0; font-size:0;border-left:20px solid transparent;border-top:20px solid #c5c5c5; border-bottom:20px solid #c5c5c5;}

.step_model .span_2{ height:40px; width:160px; background:#c5c5c5;}

.step_model .span_3{ width:0; height:0; line-height:0; font-size:0; border-left:20px solid #c5c5c5; border-top:20px solid transparent; border-bottom:20px solid transparent;}

.step_model:hover .span_1{ border-top:20px solid #6ec038; border-bottom:20px solid #6ec038;}

.step_model:hover .span_2{background:#6ec038; }

.step_model:hover .span_3{border-left:20px solid #6ec038;}

.step_2{ left:185px;}

.step_3{left:370px;}

.step_4{ left:555px;}

.step_4 .span_2{ width:180px;}

第一步

第二步

第三步

第四步

源文件下载{PE.SiteConfig.ApplicationPath/}{PE.SiteConfig.uploaddir/}/Article/20149/201409291533190097.rar