Html 如何在Bootstrap卡片底部添加波浪形状

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="card" style="background: #f6faff">
    <div class="card-body">
      <div class="box">
        <div class="row">
          <div class="col-lg-6 align-self-center">
            <div class="heading-title-2 text-left">
              <p class="font-weight-bold text-primary">Title Here</p>
              <h3 class="font-weight-bold">Lorem Ipsum is simply dummy text of the</h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- /card-body -->

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="150 20 1140 200">
      <path fill="#ecf1fd" fill-opacity="1" d="M0,256L48,218.7C96,181,192,107,288,69.3C384,32,480,32,576,58.7C672,85,768,139,864,170.7C960,203,1056,213,1152,229.3C1248,245,1344,267,1392,277.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>

  </div> <!-- /card -->
</div>