Каков наилучший способ сделать кнопку со стрелкой?

Question

Я пытаюсь создать стрелку, подобную upvote здесь, в stackoverflow (http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5).

Единственная разница в том, что когда я наводил указатель мыши на стрелку, он меняет фоновое изображение.

Мне нужно что-то вроде этого 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; 
} 

Вы должны munge с фоновым размер и положение чтобы получить именно тот эффект, который вы хотите.