JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<div class="whole-page">
  <div class="bg-image">
    <div class="curved-section">
      something here
    </div>
  </div>
</div>

CSS

.whole-page {
  width: 300px;
  height: 300px;
  background: red;
}

.bg-image {
  width: 100%;
  height: 75%;
  background: blue;
  position: relative;
}

.curved-section {
  position: absolute;
  clip-path: polygon(100% 0, 56% 100%, 100% 100%);
  background: white;
  height: 100%;
  width: 100%;
}