如何创建此徽标效果（覆盖背景 div 颜色的透明边框）

Question

到目前为止，我已经尝试了几件事，其中之一是制作整个白色菜单导航，它应该一直穿过图像的顶部。然而，试图让它工作以使其在 css 中优雅地扩展是一场噩梦。我想知道是否有另一种方法可以让标准引导导航栏具有白色背景，并且导航栏品牌（标题徽标）在哪里，覆盖导航背景颜色以仅在带有徽标的部分中透明？我是一名后端开发人员，试图解决这个问题，所以我确信我正在让它变得比需要的更难。任何建议或样品将不胜感激！

//编辑：我忘记包含指向开发站点的链接。这里是。 http://greatescapes.tiltedllc.com/

正如这篇文章的原始版本中所述。到目前为止，我尝试的主要事情是简单地创建一个非常宽的徽标和导航栏图像。这很有效，但在创建响应式行为时尝试保持一致是一场噩梦。

这是我正在使用的标头的 css 示例。

.ge-menu{
    font-family:'Montserrat', sans-serif;
    position:absolute;
    top:40px;
    background-image:url('/wp-content/uploads/2019/03/Header-mobile.png');
    background-size:cover;
    background-position:top;
    background-repeat:no-repeat;
    width:100%;
    height:280px;
    margin-top:-10px;
    z-index:100;
}

Answer 1

要创建导航栏，您可能需要从 4 个元素开始。

1. 左侧白条
2. 右侧白条
3. 绿色矩形
4. 徽标

---

通过放置白条开始。 在第一个栏的 css 中使用:after（在其后面创建一个三角形）。 在另一个栏的 css 中使用 :before（在其前面创建一个三角形）。

接下来将绿色矩形放在两个条之间并旋转它。

最后，将logo.png 放在绿色矩形的顶部。确保它具有透明背景。

---

就响应式元素而言，这取决于您想要发生什么。 如果您需要更多信息甚至帮助，请告诉我。

Answer 2

使用transform 旋转容器

.container-logo {
background: grey;
transform: rotate(-45deg);
width: 200px;
height: 100px;
}
.logo {
position: absolute;
transform: rotate(45deg);
right: 100px;
top: 50px;
color: white;
}

<div class="container-logo">
  <div class="logo">
    logo
  </div>
</div>

Answer 3

并不完美，但这是一个开始。基本上只需在几个元素上使用transform: skew(-45deg);，并在它们之间放置空间。将其作为单独的元素执行可能是最简单的

body {
  background: #CCC;
  margin: 0;
}

header {
  display: flex;
  border-top: 20px solid #57bc90;
}

.split-bar {
  background: #FFF;
  width: 200px;
  height: 50px;
  margin-top: 10px;
  transform: skew(-45deg);
}

#split-bar-left {
  margin-left: -35px;
}
#logo-bar {
  height: 150px;
  width: 200px;
  background: #014039;
  transform: skew(-45deg);
  margin-left: -20px;
  margin-right: 60px;
}

#logo {
  position: absolute;
  left: 210px;
  top: 50px;
  color: #FFF;
}

<header>
  <div class="split-bar" id="split-bar-left"></div>
  <div id="logo-bar"></div>
  <h1 id="logo">Logo</h1>
  <div class="split-bar" id="split-bar-right"></div>
</header>

编辑：再想一想，您可能只需要 #logo-bar 元素并使用其中的 ::before 和 ::after 来创建白条 BG