CSS背景图像外容器

Question

我的worpdress / bootstrap导航无法突出显示当前页面。

我试图找到最好的解决方法，这是我现在的方法，但不起作用

• 在链接上设置底部边框
• 在容器上留有边距或填充或任何类型的空间，并在其底部添加背景图像

不幸的是，一旦图像与边框重叠，图像就不会显示。

你对此有任何快速解决方法或其他方法吗？

也许我想为了扩展容器，就是修复链接和容器高度，并将它们放在我想要的位置......

Answer 1

必须提供三角形作为绝对块。它可以用于：之后。

对于三角形，您可以使用css（不是图像）

ul{
  list-style:none;
}
li{
  display: inline-box;
  width: 50px;
  padding: 20px;
  float: left;
}
.active{
  position: relative;
  border-bottom: 3px solid red;
}
/*triangle absolute position and centred*/
.active:after{
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ff0000 transparent transparent     transparent;
}

https://codepen.io/flinius/pen/XgyLba