Position 4 background image on top, left, right and bottom

Question

I am trying to design a following UI.

For this I have created two images which will be used as a background. Note: Total four images are required but the bottom image can be used as a transpose of top, similarly right can be used a transpose of left.

I am able to place the top and left, however unable to place the bottom and right image.

  <div class="layout-shape-container">
    <div class="top-shape" style="text-align: center;">
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
    </div>

    <div class="left-shape" style="">
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
    </div>
  </div>

CSS:

.layout-shape-container{
    margin-bottom: 172px;
    position: relative;
    width: 900px;
    height: 900px;
}
.top-shape{
    background-image: url("https://i.ibb.co/QPZTzSJ/top-triangle-shape.png");
    height: 50%;
    width: 100%;
    background-repeat: no-repeat;
    z-index: 9;
}
.left-shape{
    background-image: url("https://i.ibb.co/TchQ4rp/left-triangle-shape.png");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    top: 172px;
    left: 0;
    position: absolute;

}

Here is the fiddle.

Can someone help me understand, how would i place right and bottom shape image?

Also, Is it possible to achieve the layout without using these shape images?

Answer 1

As the blue/white shape is just for decoration rather than having any great semantic value you might like to put it into a pseudo element rather than in the main HTML where the extra div(s) will have no meaning other than to give a bit of background color.

Here's a rough example, obviously you'll want to change the % values to suit your actual case. It puts a linear gradient background on the after pseudo element which is then clipped to the polygon shape. The before pseudo element provides the underlying grayish background. If you define the dimensions of the div in % terms then the whole thing becomes responsive.

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

Answer 2

You can use clip-path for the shapes, along with some absolute positioning and flex displays.

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

Answer 3

Below you will find a start example.

I used this codepen to do so: https://codepen.io/stoumann/pen/abZxoOM

There is also some ways to do so with borders

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>