ナビゲーションバーの下の境界私はNAVラッパーの下の境界を形成しようとしています

Question

はそう三角形は、その中心に飛び出しシェーピング（以下EX。の画像）。

ちょうど下の境界に関するNAVラッパーのCSSを変換/編集してこの形状を作成する方法はありますか？

三角形は、中断されていない背景パターンと下枠のドロップシャドウをナビゲーションラッパーと同じにしているため、境界線上にCSS /イメージシェイプを追加するのではなく、CSSトランスフォームで行う必要があります。

IE：

ありがとう！

Answer 1

これには、CSS疑似要素:before &を使用することができます。

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

・ホープ、このことができます：以下のスニペットを見てください！