一行中的三个div作为标题

Question

我的标题没什么问题。我想创建这样的东西：

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

我尝试过Float：左并尝试过，显示

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

Answer 2

这样的事情怎么样？
不管窗口有多宽，这也使线条保持45度的倾斜度。

.header {
  display: flex;
  overflow: hidden;
}

.logo {
  position: relative;
  flex: 0 0 24%;
  max-width: 24%;
  height: 80px;
}

.logo:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -100%;
  right: 0;
  bottom: 0;
  background-color: green;
  transform: skewX(45deg);
}

.photo1 {
  position: relative;
  flex: 0 0 38%;
  max-width: 38%;
  width: 100%;
  height: 80px;
}

.photo1:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  background-color: red;
  transform: skewX(45deg);
}


.photo2 {
  position: relative;
  flex: 0 0 38%;
  max-width: 38%;
  height: 80px;
}

.photo2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: -100%;
  bottom: 0;
  background-color: brown;
  transform: skewX(45deg);
}

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