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

要实现卡片底部带有波浪图形的效果，可以通过CSS伪元素+SVG背景的方式完成，以下是具体实现步骤：

修改后的完整代码 #

HTML部分 #

<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 py-4">
  <div class="card wave-card">
    <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>Title Here</p>
              <h3 class="iq-tw-6">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 class="col-lg-6 align-self-center r-mt-40">
            <!-- 可添加图片或其他内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS部分 #

.wave-card {
  background-color: #f0f6ff;
  position: relative;
  overflow: hidden;
  /* 给波浪留出底部空间，避免遮挡内容 */
  padding-bottom: 45px;
  border: none; /* 可选：去掉默认卡片边框，让波浪更自然 */
}

.wave-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  /* 内嵌SVG实现波浪，颜色与卡片背景一致 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23f0f6ff" fill-opacity="1" d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,69.3C960,85,1056,107,1152,101.3C1248,96,1344,64,1392,48L1440,32L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z"></path></svg>') no-repeat bottom center;
  background-size: cover;
}

关键说明 #

• 定位与溢出控制：给卡片添加position: relative和overflow: hidden，确保波浪伪元素被限制在卡片内部，不会超出边界。
• 波浪定制：SVG的fill属性设置为卡片背景色#f0f6ff，实现波浪与卡片背景无缝衔接；如果需要调整波浪形状，可以修改SVG的路径参数，或者使用在线SVG波浪生成工具生成适配代码。
• 间距调整：通过padding-bottom给波浪预留空间，避免卡片内容被波浪遮挡，数值可根据波浪高度灵活调整。

内容的提问来源于stack exchange，提问作者core114