Shaping the Navbar's Bottom Border

Question

I am trying to shape a nav wrapper's bottom border so a triangle pops out in its center (ex. image below).

Is there a way to create this shape by just editing/transforming the nav wrapper's CSS regarding the bottom border?

The triangle has the same uninterrupted background pattern and bottom border drop shadow as the nav wrapper, so I am thinking this should be done via CSS transform rather than adding a CSS/image shape over the border.

IE:

Thanks!

Answer 1

You can use CSS pseudo elements :before & :after for this. Please have a look at the snippet below:

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

Hope this helps!