问位置4背景图像在上、左、右和底部

EN

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: .9rem;
}

#main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: white;
  height: 100vh;
  position: relative;
}

#left {
  flex: 1;
  height: 80%;
  background: blue;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul li {
  list-style: none;
}

#sect {
  flex: 2;
  display: flex;
  justify-content: center;
  padding: .5rem;
}

#right {
  flex: 1;
  height: 80%;
  background: blue;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  clip-path: polygon(100% 0, 100% 77%, 50% 100%, 0 77%, 0 0);
}

#bottom { 
  display: flex;
  align-items: flex-end;
  justify-content: center; 
  background: #ddd;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  clip-path: polygon(50% 1%, 100% 23%, 100% 100%, 0 100%, 0 23%);
}

<div id="main">
  <!-- absolutely positioned elements for top and bottom
      placed on top so z-index is behind following content-->
  <div id="top">This is the top section</div>
  <div id="bottom">This is the bottom section</div>
  <!-- main flex container starts here  
       Place a justify-content: space-between to space 
       left and right elements to far edges -->
  <div id="left">
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
    </ul>
  </div>
  <div id="sect">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="right">
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
    </ul>
  </div>  
</div>

body{
  margin: 0;
}
.container{
  position:relative;
  height:100vh;
}
.top{
  width:100%;
  height:100px;
  background: grey;
}
.top-2{
  position:absolute;
  top: 100px; /* Should be equal to .top height */
  height:20px;
  width: 100%;
  background: grey;
  clip-path: polygon(100% 0%,0% 0%,50% 100%);
}
.left{
  width:20%;
  height:80%;
  position:absolute;
  top:10%;
  left:0;
  background: blue;
}
.left-2{
  width: 20px;
  height: 80%; /* Should be equal to .left height */
  position:absolute;
  top:10%;
  left:20%;  /* Should be equal to .left width */
  background: blue;
  clip-path: polygon(0% 0%,0% 100%,100% 50%);
}

<div class="container">
  <div class="top"></div>
  <div class="top-2"></div>
  <div class="left">
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
  </div>
  <div class="left-2"></div>
</div>

.layout-shape-container {
  margin-bottom: 172px;
  position: relative;
  width: 900px;
  height: 900px;
}

.layout-shape-container::before,
.layout-shape-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layout-shape-container::before {
  background: gray;
  z-index: -2;
}

.layout-shape-container::after {
  background-image: linear-gradient(to right, blue 0, blue 30%, white 30%, white 70%, blue 70%, blue 100%);
  z-index: -1;
  clip-path: polygon(0 20%, 30% 20%, 50% 50%, 70% 20%, 100% 20%, 100% 80%, 70% 80%, 50% 50%, 30% 80%, 0% 80%);
}

<div class="layout-shape-container"></div>