您的位置:首页> 日志> 前端技术 正文
DTOP

纯css3写的步骤框

卓文静 | 2014年09月29日 |

>>收藏本文 已有 0条评论

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯css3写的步奏框</title>

<style>

.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;}

</style>

</head>

 

<body>

<div class="step">

<a href="#" class="step_first"><span class="span_1">第一步</span><span class="span_2"></span></a>

<a href="#" class="step_model step_2"><span class="span_1"></span><span class="span_2">第二步</span><span class="span_3"></span></a>

<a href="#" class="step_model step_3"><span class="span_1"></span><span class="span_2">第三步</span><span class="span_3"></span></a>

<a href="#" class="step_model step_4"><span class="span_1"></span><span class="span_2">第四步</span></a>

</div>

</body>

</html>

源文件下载/UploadFiles/Article/20149/201409291533190097.rar