jeroenknol

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

.inverted-border-radius {
  position: relative;

jeroenknol

.inverted-border-radius::before {
  content: "";
  position: absolute;
  
  background-color: #0074D9;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #001f3f; /* This is where the magic happens! */

jeroenknol

.inverted-border-radius {
  position: relative; /* Add position relative so the pseudo element will origin off this with position absolute */
  height: 100px;
  width: 325px;
  background-color: #F66969;
  border-radius: 25px 25px 25px 0;
}

/* The newly created pseudo element */
.inverted-border-radius::before {

jeroenknol

.inverted-border-radius {
  height: 100px;
  width: 325px;
  background-color: #F66969;
  border-radius: 25px 25px 25px 0; /* This line was updated */
}

jeroenknol

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

.inverted-border-radius {
  height: 100px;