做箭头按钮的最佳方法是什么？

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;
}

你必须使用背景位置和大小属性来获得你想要的效果。