Формирование нижней границы Navbar

Question

Я пытаюсь сформировать нижнюю границу обложки навигатора, так что треугольник выскакивает в центре (например, изображение ниже).

Есть ли способ создать эту форму, просто отредактировав CSS-оболочку навигатора относительно нижней границы?

Треугольник имеет такой же непрерывный фоновый рисунок и нижнюю границу, что и оболочка для переноса, так что я думаю, что это должно быть сделано с помощью преобразования 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>

Надеется, что это помогает!