onHover按钮剪出一个三角形并显示背景

Question

如果Button像这张图片一样悬停，我想剪出一个三角形：

我用于我的网站引导程序，所以这是我的导航栏的示例： http://www.bootply.com/oJeavrQoH6

我希望你们都明白我想做什么。

Answer 1

我知道这不是你想要的答案，因为它不是很干净但是我认为你必须剪掉你发布的图像中的箭头并将其设置为背景图像：在此代码中的伪元素之后：

http://www.bootply.com/hGoUdtM0vk

nav ul li a:hover:after {
content:"";
display: block;
position: absolute;
  top: 0;
  left: 50%;
  -wekit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);

  -o-transform: translateX(-50%);
transform: translateX(-50%);
  background-image: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);
  background-attachment: fixed;
  height: 15px;
  width: 40px;

}

Answer 2

使用多个线性渐变（IE10 +） 例如http://www.bootply.com/zwpEtQD5dY