塑造导航栏的底部边框

Question

我正在尝试调整导航包装器底部边框的形状，以便在其中心弹出一个三角形（例如下图）。

有没有办法仅通过 editing/transforming 导航包装器的 CSS 关于底部边框来创建此形状？

三角形具有与导航包装相同的不间断背景图案和底部边框阴影，所以我认为这应该通过 CSS 变换而不是在上面添加 CSS/image 形状来完成边界.

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>

希望对您有所帮助！

塑造导航栏的底部边框

Shaping the Navbar's Bottom Border

css

transform

border

css-transforms