Reports

If you wanted it to be all one element, you would definitely need an SVG. This question has roots in another question relating to masking/cutting out parts of an element. I've come up with a way to create the shape you have drawn in 2 div shapes wrapped under a div, based on the accepted answer to the previously stated question, but it currently relies on a fixed height and width. Each div is given a different color to differentiate between them:

:root {
  --rounding-factor: 20px;
}

body {
  margin: 20px;
}

#wrapperDiv {
  background-color: pink;
  height: calc(200px + var(--rounding-factor));
  width: 400px;
  position: relative;
}

#lDiv {
  position: absolute;
  top: var(--rounding-factor);
  width: 50%;
  height: 200px;
  border-top-left-radius: var(--rounding-factor);
  overflow:hidden;
  z-index: 1;
}


#lDiv::after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 200px;
  height: var(--rounding-factor);
  border-top-left-radius: var(--rounding-factor);
  box-shadow: 0px 0px 0px 2000px orange;
}

#rDiv {
  position: absolute;
  right: 0;
  width: 50%;
  height: 200px;
  border-bottom-right-radius: var(--rounding-factor);
  overflow:hidden;
  z-index: 1;
}


#rDiv::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: var(--rounding-factor);
  border-bottom-right-radius: var(--rounding-factor);
  box-shadow: 0px 0px 0px 2000px yellow;
}

#content {
  position: absolute;
  z-index: 2;
  width: 100%;
  top: var(--rounding-factor);
  height: calc(200px - var(--rounding-factor));
  background-color: rgba(100, 255, 200, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <div id="wrapperDiv">
    <div id="lDiv">
    </div>
    <div id="rDiv">
    </div>
    <div id="content">
      <p>Some content here.</p>
    </div>
  </div>
</body>

</html>

79164399