이미지가없는 체크 아웃

CSS에서 체크 아웃 (추적) 메뉴를 만드는 가장 좋은 방법은 무엇입니까? 이미지가없는 체크 아웃

enter image description here

어떻게 이미지없이이 메뉴를 만드는 방법? 예 : CSS 삼각형을 사용합니까?

2011-10-16 mm1

가장 좋은 방법은 이미지에 그것을 할 것입니다. – BoltClock

당신은 4 개의 모든 수직선을 배경으로하고 Bg- 위치를 바꿀 수 있습니다. 그런 다음 하나의 이미지 만 있습니다. –

CSS-Tricks에 설명 된대로 CSS 삼각형을 사용할 수 있습니다. 그런 다음 배경에 CSS-gradient을 적용하십시오. 아, 그리고 약간의 border-radius이 첫 번째 (그리고 아마 마지막 요소)에 적용될 필요가 있습니다.

불행히도, 내가 아는 한 삼각형 부분에 CSS 그라디언트를 적용 할 수 없습니다. 그 배경은 실제로 테두리의 색이기 때문입니다.

그래디언트는 모든 브라우저에서 제대로 작동하지 않으므로 이전 버전에서는 일반 이미지로 대체해야합니다.

UPDATE : AN, 물론, @BoltClock 당신이 :before 또는 :after 의사 요소와 함께 하나의 스프라이트 이미지를 사용할 수 있듯이.

샘플 스프라이트 이미지 :

Sample sprite

2011-10-16 10:20:08 Lapple

답변