html - CSS Shape for Div mentioned in the Image

Question

I have 2 images of CSS Div Shape. I want to make my DIVs like in the image.

Any help would be great.

.imageOne {
  clip-path: polygon(0 0, 100% 0%, 100% 11%, 0 0);
  height: 100px;
  background: blue;
}

.imageTwo {
  clip-path: polygon(80% 30%, 100% 41%, 100% 41%, 0 40%, 0 40%);
  height: 100px;
  background: blue;
}

<div class="imageOne">

</div>


<div class="imageTwo">

</div>

question from:https://stackoverflow.com/questions/65857572/css-shape-for-div-mentioned-in-the-image

Answer 1

You can adjust the like below:

.imageOne {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 40%); /* adjust the 40% here */
  height: 100px;
  background: 
    linear-gradient(to bottom left,transparent 49%,#b3e1ff 50%) 
     bottom left/200% 60% /* adjust the 200% here, 60% = 100% - 40% (from the top) */
     no-repeat
    #e1f4ff;
}

.imageTwo {
  /*                       here ----v               v---- and here the same */
  clip-path: polygon(100% 100%,100% 70%,  80% 0, 0 70%,0 100%);
  /*    adjust this to control the top ----^                                */
  height: 100px;
  background: #e1f4ff;
}

<div class="imageOne">

</div>


<div class="imageTwo">

</div>