Flex框布局，调整块的高度

Question

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

获得图像中标记的三角形的最佳方法是什么？是否有可能只用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

在flex-basis中使用flex: 0 X（halfcontainers简写），并使用::after来制作三角形

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;