塑造导航栏的底部边框

Question

我想要塑造导航包装的底部边框，以便在其中心弹出一个三角形（例如下图）。

有没有办法通过编辑/转换关于底部边界的导航包装器的CSS来创建此形状？

三角形与nav包装具有相同的不间断背景图案和底部边框投影，所以我认为这应该通过CSS转换完成，而不是在边框上添加CSS /图像形状。

IE：

谢谢！

Answer 1

您可以使用CSS伪元素:before & :after为此。请下面的代码片段看看：

.nav-bar { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100px; 
 
    background: #33b5e5; 
 
    color: #fff; 
 
    font-size: 50px; 
 
    font-weight: 700; 
 
    border-bottom: 6px solid #8ACEE9; 
 
    position: relative; 
 
} 
 

 
.nav-bar:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
    border-top: 30px solid #33b5e5; 
 
} 
 

 
.nav-bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -40px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    border-top: 40px solid #8ACEE9; 
 
}

<div class="nav-bar"> 
 
    Navbar 
 
</div>

希望这有助于！