纯css3写的步奏框

wenyier

浏览: 77434 次
性别:

最近访客更多访客>>

bao8802

aikebr

熊吉爷爷

zoemilk

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

笔记练习

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

<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>