html - Flex 盒子布局，调整 block 的高度

Question

如何调整 .half-containers1 和 .half-containers2 的高度？

获得我在图像中标记的三 Angular 形的最佳方法是什么？只能使用 css 吗？或者我必须使用图像？

这是我的 fiddle和我尝试做的布局图片

html,
body {
  margin: 0;
  height: 100%;
}

div {
  box-sizing: border-box;
  border: 0.5px solid red;
}

.main-container {
  height: 100%;
  display: flex;
}

.left-container {
  flex: 1 1 0;
}
.center-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.right-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers1 {
  flex: 1;
  height: 400px;
 
}
.half-containers2 {
  flex: 1;
  height:100px;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png")
 
}

<div class="main-container">
  <div class="left-container">Left container</div>
  <div class="center-container">
    <div class="half-containers1">
      <p>Center</p>
 
   
    </div>
    <div class="half-containers2">Center2</div>
  </div>
  
  <div class="right-container">
  Right container
  </div>
</div>

Answer 1

在你的halfcontainers中使用flex-basis(flex: 0 X简写)并使用::after做三 Angular 形

html,
body {
  margin: 0;
  height: 100%;
}

div {
  box-sizing: border-box;
  border: 1px solid red;
}

.main-container {
  height: 100%;
  display: flex;
}

.left-container {
  flex: 1;
}

.center-container, .right-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.half-containers1 {
  flex: 0 70% /*400px*/;
  position: relative;
}

.half-containers1::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: solid 10px white;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
}

.half-containers2 {
  flex: 0 30%/*100px*/;
  background: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png") no-repeat center / cover
}

<div class="main-container">
  <div class="left-container">Left container</div>
  <div class="center-container">
    <div class="half-containers1">
      <p>Center</p>
    </div>
    <div class="half-containers2">Center2</div>
  </div>
  <div class="right-container">
    Right container
  </div>
</div>