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

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

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