塑造導航欄的底部邊框

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>

希望這有助於！