一行中的三个 div 作为 header

Question

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

我做了这个，但我无法让第三个 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>

Answer 2

这样的怎么样？
这也使线条保持 45 度倾斜，无论 window 有多宽。

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

一行中的三个 div 作为 header

Three div's in one line as header

html

css

clip-path