Den unteren Rand der Navbar gestalten

Question

Ich versuche, den unteren Rand eines Nav-Wrappers so zu formen, dass ein Dreieck in seiner Mitte erscheint (Beispiel: Bild unten).

Gibt es eine Möglichkeit, diese Form zu erstellen, indem Sie einfach das CSS des nav Wrappers in Bezug auf den unteren Rand bearbeiten/transformieren?

Das Dreieck hat das gleiche ununterbrochene Hintergrundmuster und unteren Grenzschatten wie der Nav-Wrapper, also denke ich, dass dies über CSS-Transformation getan werden sollte, anstatt eine CSS/Bildform über den Rand hinzuzufügen.

IE:

Dank!

Answer 1

Sie können dafür CSS-Pseudoelemente :before & :after verwenden. Bitte haben Sie einen Blick auf das Snippet unten:

.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>

hoffe, das hilft!