JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<div class="inverted-border-radius"></div>

CSS

body {
  background-color: #F7F0D0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inverted-border-radius {
  position: relative;
  height: 100px;
  width: 325px;
  background-color: #F66969;
  border-radius: 0;
}

.inverted-border-radius::before {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #09f;
}