CODEWITHSUNDEEP
htmlcssshapes
Xperia Reno
Xperia Reno

Reputation: 531

CSS Shape for Div mentioned in the Image

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

Image

Image 2

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>

Upvotes: 1

Views: 266

Answers (1)

Temani Afif
Temani Afif

Reputation: 272986

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>

Upvotes: 1

Related Questions