CSS - 指针悬停的Navbar

Question

我想制作一个箭头指向悬停的导航栏。 与此类似：

有没有办法在CSS中执行此操作而不使用箭头作为背景图像并在元素上添加填充？

Answer 1

您可以使用:after伪元素创建一个CSS三角形，并将其置于绝对位置。

这样的事情：

li.active a:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -3px
}

<强> Demo

Answer 2

使用<div class="arrow_box">INFORMACION</div>

使用CSS：

.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 21px;
margin-left: -21px;
}

使用http://cssarrowplease.com/生成

（谷歌上的一个简单搜索，你会发现...）

Answer 3

使用我之前发布的CssArrowPlease：

<div class="header">
    <div class="nav">
        <ul>
            <li>Page</li>
            <li id="checked">
                Page 1
                <div class="arrow_box"></div>
            </li>
            <li>Page</li>
            <li>Page</li>
        </ul>
    </div>
    <div class="sub_nav"></div>
</div>

的CSS：

.header{
    width: 50%;
    background-color: #fbfbfb;
}
.nav ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#checked{
    padding: 10px;
    background-color: #3178ed;
    display: inline-block;
    color: #fff;
    position: relative; 
}
.nav li{
    padding: 10px;
    display: inline-block;
}
.sub_nav{
    width: 100%;
    height: 20px;
    background-color: #dddddd;
}
.arrow_box {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background: #3178ed;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(49, 120, 237, 0);
    border-top-color: #3178ed;
    border-width: 10px;
    margin-left: -10px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: ;
    border-width: 11px;
    margin-left: -11px;
}

小提琴：Link