<div class="card">
  <svg class="card__bg card__bg--fill" overflow="visible">
    <rect width="100%" height="100%" rx="30" fill="currentColor" />
  </svg>
  <svg class="card__bg card__bg--bottom" viewBox="0 0 318 86" width="318" overflow="visible">
    <path d="M318,0h-.35C277.17,0,254.8,21.65,222.1,57.39,206.59,74.34,184.44,86,159,86S111.41,74.34,95.9,57.39C63.2,21.65,40.83,0,.35,0H0Z" vector-effect="non-scaling-stroke" stroke="currentColor" fill="none" />
    <path d="M318,0h-.35C277.17,0,254.8,21.65,222.1,57.39,206.59,74.34,184.44,86,159,86S111.41,74.34,95.9,57.39C63.2,21.65,40.83,0,.35,0H0" vector-effect="non-scaling-stroke" fill="currentColor" stroke-linecap="round" />
  </svg>

  <div class="card__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam error quibusdam quam cumque, nesciunt quisquam ipsam voluptate asperiores reprehenderit iure possimus aliquid sapiente repellendus facilis sequi enim distinctio ea ullam!
  </div>
</div>

body {
  font-family: sans-serif;
  text-align: center;
}

.card {
  position: relative;
  width: 50%;
  margin: 0 auto;
  z-index: 0;
  --w: 86px;
  padding-bottom: calc(var(--w) * 86 / 318);
}

@media (min-width: 700px) {
  .card {
    --w: 142px;
  }
}

@media (min-width: 1200px) {
  .card {
    --w: 201px;
  }
}

.card__bg {
  position: absolute;
  stroke-width: 8px;
  stroke: tomato;
  color: lemonchiffon;
  z-index: -1;
}

.card__bg--fill {
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--w) * 86 / 318);
}

.card__bg--bottom {
  left: calc(50% - var(--w) / 2);
  bottom: 0;
  width: var(--w);
}

.card__content {
  padding: 20px;
}