Question

我正在为我的tumblr编辑一个新的布局，我想知道是否有办法添加这样的小三角形：

http://i.imgur.com/e0wP0Qd.png

到当前链接，按当前平均值，每个被点击的页面/一个人当前在其上的链接都会有一个三角形。

我有一个菜单栏，其中包含所有链接（可在此处查看：http://mains-tester.tumblr.com/），我正在尝试做两件事，使其在菜单栏上突出显示当前页面，它下面有一个小三角形。我试图找出这是一种方法，只需将三角形添加到每个链接，而不必去做每一个链接。

Answer 1

使用伪类:after添加此类效果非常容易。

确保position: relative标记的<a>，您可以添加此CSS，这将在底部居中添加白色箭头。

.linkage:hover:after {
  width: 0;
  height: 0;
  position: absolute;
  content:"";
  display:block;
  /* Ads an arrow effect exploiting the way that browsers join borders together */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  /* centers relative to parent */
  left: 50%;
  /* Compensates for width of border (arrow) */
  margin-left: -8px;
}

我已经设置了它在这里工作的演示（使用了大部分相同的CSS）：http://jsfiddle.net/QybKW/4/

如果您不想依赖CSS技巧，可以创建一个PNG图像文件并设置伪元素的背景，使其具有正宽度和高度。

在当前活动页面链接下添加三角形/使当前页面突出显示

1 个答案: