How to create this shape in CSS?

Question

Is it possible to create this shape in CSS without using an svg? Basically a rectangle with an inverted curve on the bottom.

Any help appreciated!

Answer 1

You can use mask-image along with radial-gradient to cut off the bottom part

body {
  /* demonstration purpose */
  background-image: repeating-linear-gradient(45deg, #606dbc, #606dbc 12px, #465298 12px, #465298 24px);
}

div {
  width: 200px;
  height: 120px;
  background-color: white;
  -webkit-mask-image: radial-gradient(closest-corner at 50% 175%, transparent 0%, transparent 99.5%, #fff 100%);
  mask-image: radial-gradient(closest-corner at 50% 175%, transparent 0%, transparent 99.5%, #fff 100%);
}

<div></div>