화살표 버튼을 사용하는 가장 좋은 방법은 무엇입니까?

Question

stackoverflow (http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5)에서 upvote와 같은 화살표 버튼을 만들려고합니다.

유일한 차이점은 화살표 위에 마우스를 올려 놓으면 배경 이미지가 변경된다는 것입니다.

나는 http://css-tricks.com/snippets/css/css-triangle/과 같은 것이 필요하지만 RGB 색상 대신 배경 이미지가 필요합니다.

가장 좋은 방법은 무엇입니까?

Answer 1

배경색을 알고 있으면 부적절 할 수 있습니다. 예를 들어, 페이지의 배경 당신은 배경의 위치와 크기로 찾으면해야합니다

HTML

<div id="arrow"> 

CSS

#arrow { 
    width: 0; 
    border: 40px solid white; 
    border-bottom-color: transparent; 
    background-image: url('...'); 
    background-position: -40px 0; 
    background-repeat: no-repeat; 
    background-size: 80px; 
} 

... 흰색 인 경우 속성을 사용하여 원하는 효과를 정확하게 얻을 수 있습니다.