다단계 헤더를 만드는 방법

Question

페이지 번호와 설명이 포함 된 다단계 양식의 헤더를 만들려고합니다. 내가 원하는 무엇

이 난 그냥 화살표 기호로 그 boder을 만드는 방법을 알 필요가 대부분 CSS의 질문이

1 step > 2tep > 3 step> 4 step 

같은 화살표 뭔가 각 단계를 나누어입니다

Fiddle

설명

당신은 FID에서 볼 수 있듯이 dle 나는 다음 단계로 넘어갈 때 체크 표시로 바뀌는 아이콘을 가지고 있습니다. 그래서이 active, previous는, next이

Answer 1

를 참조 하나의 화살표가 그것을

를 생성하는 참조?

.divider:before { content: ">"; } 

Answer 2

당신이 (필자는 텍스트와 간단한 화살표를했던)이 fiddle 뭔가를 검색하는 단계를 분리하는 일부 CSS를 background 색상을 추가 한 후 > 화살표이 아이콘을 분리하려고?

.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;} 
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;} 
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;} 
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;} 
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;} 
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;} 
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;} 

이 당신이 원하는 무엇을 하는가,이 site이 바이올린을 보면이 demo

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid green; 
} 



<div class="arrow-right"></div>