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

Question

到目前为止，我已经尝试了一些方法，其中之一是使整个白色菜单导航一直到图像的顶部。但是，这一直是一场噩梦，试图使其正常运行，以便它可以在CSS中正常扩展。我想知道是否还有另一种方法可以简单地将标准引导导航栏带有白色背景，并将导航栏品牌（标题徽标）覆盖在导航栏背景颜色中，使其仅在带有徽标的部分中透明？我是一个后端开发人员，试图弄清楚这一点，所以我确定我正在使其变得比所需要的更加困难。任何建议或样品将不胜感激！

// edit：我忘记了包含开发站点的链接。这里是。 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

并不完美，但这是一个开始。基本上，仅在一些元素上使用echo "<table><tbody>"; foreach($BreakTime as $key => $val) { echo "<tr><td>" .$key. "</td>"; for($d=1; $d<=31; $d++) { echo "<td>"; echo isset($BreakTime[$key][$d]) ? $BreakTime[$key][$d] : '00:00'; echo "</td>"; } echo "</tr>"; } echo "</tbody></table>"; ，并在它们之间放置空格。将其作为单独的元素进行操作可能最简单

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来创建白条BG

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

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

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

---

首先放置白色条。 在第一个栏的CSS中使用:after（在其后面创建一个三角形）。 在另一栏上的CSS中使用:before（在其前面创建一个三角形）。

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

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

---

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