html - 一行中的三个 div 作为标题

Question

我的页眉没有什么问题。我想创建这样的东西:

我做了这个，但我无法让第三个 div 出现在与其他 div 相同的行上。我该怎么做？

我试过 Float: left 并试过，显示

.logo {
  float:left;
  height: 80px;
  width:100%;
  background-color: green;
  -webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}

.photo1 {
  background-color: red;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}

.photo2 {
  background-color:brown;
  background-size: cover;
  background-position: left center;
  height: 80px;
-webkit-clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
}

<div class="header">
  <div class="logo"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

Answer 1

设置 3 个 DIV:

position: absolute;
width: 100%;

同时调整.photo2的多边形大小

.logo {
  position: absolute;
  height: 80px;
  width:100%;
  background-color: green;
  -webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}

.photo1 {
  position: absolute;
  background-color: red;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}

.photo2 {
  position: absolute;
  background-color:brown;
  background-size: cover;
  background-position: left center;
  height: 80px;
  width: 100%;
-webkit-clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
}

<div class="header">
  <div class="logo"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>