html步骤条,css步骤条（两种方法）

css步骤条

/*方法一*/.stepDiv{width:1100px;height:50px;margin:0 auto;

}.stepOne{width:150px;font-size:0;position:relative;float:left;

}.stepOne div{background:#ff5837;width:125px;height:50px;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;float:left;

}.stepOne span{width:0;height:0;border-width:25px 0 25px 25px;border-style:solid;border-color:transparent transparent transparent #ff5837;float:left;

}.stepTwo{width:150px;font-size:0;position:relative;

/*left: -15px;*/float:left;

}.stepTwo div{background:#f8f8f8;width:75px;height:50px;float:left;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;

}.stepTwo span:nth-of-type(1){width:0;height:0;border-width:25px 25px 25px 25px;border-style:solid;border-color:#f8f8f8 #f8f8f8 #f8f8f8 transparent;top:0px;left:0px;float:left;

}.stepTwo span:nth-of-type(2){width:0;height:0;border-width:25px 0 25px 25px;border-style:solid;border-color:transparent transparent transparent #f8f8f8;float:left;

}.stepThree{width:150px;font-size:0;position:relative;float:left;

}.stepThree div{background:#f8f8f8;width:125px;height:50px;float:left;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;

}.stepThree span{width:0;height:0;border-width:25px 0px 25px 25px;border-style:solid;border-color:#f8f8f8 #f8f8f8 #f8f8f8 transparent;top:0px;left:0px;float:left;

}

/*方法二*/.stepNew{width:1100px;height:50px;margin:50px auto;

}

/* */.stepOneN{width:150px;font-size:0;position:relative;float:left;background:#149726;

/*更改此处的颜色即可完成*/

}.stepOneN div{width:150px;height:50px;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;

}.stepOneN span:nth-of-type(1){border-width:25px 0 25px 25px;border-style:solid;border-color:#fff transparent #fff transparent;position:absolute;top:0;right:0;

}

/* */.stepTwoN{width:150px;font-size:0;position:relative;float:left;background:#149726;

}.stepTwoN div{width:150px;height:50px;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;

}.stepTwoN span:nth-of-type(1){border-width:25px 0 25px 25px;border-style:solid;border-color:transparent transparent transparent #fff;position:absolute;top:0;left:0;

}.stepTwoN span:nth-of-type(2){border-width:25px 0 25px 25px;border-style:solid;border-color:#fff transparent #fff transparent;position:absolute;top:0;right:0;

}

/* */.stepThreeN{width:150px;font-size:0;position:relative;float:left;background:#f8f8f8;

/*更改此处的颜色即可完成*/

}.stepThreeN div{width:150px;height:50px;vertical-align:text-bottom;font-size:15px;color:#000;line-height:50px;text-align:center;

}.stepThreeN span:nth-of-type(1){border-width:25px 0 25px 25px;border-style:solid;border-color:transparent transparent transparent #fff;position:absolute;top:0;left:0;

}

1.第一步