使用 bootstrap 的波浪形底部看起来很奇怪答案

【问题标题】：wave shape looks weird the bottom using bootstrap使用 bootstrap 的波浪形底部看起来很奇怪
【发布时间】：2020-08-06 06:07:47
【问题描述】：

我正在尝试使用 SVG 形状在引导 CSS 中构建标题波，但是当我尝试在 HTML 代码上使用引导时。目前，我的代码看起来像第二张图片，但我想让它看起来像第一张图片而不会有奇怪的波浪。第一个与屏幕具有相同的宽度（纯 CSS），但我想让它与 bootstrap 兼容而不会出现此问题，因为使容器更小 div 和 wave 看起来很小，而且很奇怪

@import url("https://fonts.googleapis.com/css?family=Hind");
html, body {
  margin: 0;
  font-family: Hind, sans-serif;
}

.header {
  background: #3076ff;
  color: #f1f1f1;
  position: relative;
  width: 100%;
  height: 170px;
  margin: auto;
}
@media only screen and (max-width: 1000px) {
  .header {
    height: 150px;
  }
}
.header .title {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 3em;
}
@media only screen and (max-width: 600px) {
  .header .title {
    font-size: 2em;
  }
}
@media only screen and (max-width: 400px) {
  .header .title {
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 200px) {
  .header .title {
    font-size: 1em;
  }
}
.header .headerCurve {
  width: 100%;
  fill: #3076ff;
}

.wrapper {
  min-height: calc(100vh - 2rem);
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
      <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="header">
  <h1 class="title">Developer Job Postings</h1>
  <svg class="headerCurve" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" transform="rotate(180 0 30)">
    <path class="wavePath" d="M826.337463,25.5396311 
    C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 
    C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 
    C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 
    C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 
    Z"></path>
 </svg>
</div>
    </div>
  </div>

</div>

</body>
</html>

【问题讨论】：

看起来你只需要将标题类中的高度从 170px 减小到更小的值？
我通过添加 auto 来修复它，但是一旦我尝试响应式视图看起来有点奇怪

标签： html css twitter-bootstrap svg

【解决方案1】：

我会将它用作与渐变相结合的背景：

@import url("https://fonts.googleapis.com/css?family=Hind");
html,
body {
  margin: 0;
  font-family: Hind, sans-serif;
}

.header {
  background:
    linear-gradient(#3076ff,#3076ff) top/100% calc(100% - 50px),
    url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" transform="rotate(180 0 30)" fill="%233076ff"><path class="wavePath" d="M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z"></path></svg>') bottom/100% 200px;
   background-repeat:no-repeat;
  color: #f1f1f1;
  position: relative;
  width: 100%;
  height: 170px;
  margin: auto;
}

@media only screen and (max-width: 1000px) {
  .header {
    height: 150px;
  }
}

.header .title {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 3em;
}

@media only screen and (max-width: 600px) {
  .header .title {
    font-size: 2em;
  }
}

@media only screen and (max-width: 400px) {
  .header .title {
    font-size: 1.5em;
  }
}

@media only screen and (max-width: 200px) {
  .header .title {
    font-size: 1em;
  }
}

.header .headerCurve {
  width: 100%;
  fill: #3076ff;
}

.wrapper {
  min-height: calc(100vh - 2rem);
}

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

<head>
  <meta charset="UTF-8">
  <!-- CSS only -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="header">
          <h1 class="title">Developer Job Postings</h1>
          
        </div>
      </div>
    </div>

  </div>

【讨论】：