форма волны выглядит странно внизу, используя bootstrap - PullRequest
Новая
       88

форма волны выглядит странно внизу, используя bootstrap

0 голосов
/ 05 августа 2020

Я пытаюсь создать волну заголовка в bootstrap CSS, используя форму SVG, но, тем не менее, когда я попытался использовать bootstrap в коде HTML. в настоящее время мой код выглядит как второе изображение, но я хочу сделать его похожим на первое, без странных волн. первый имеет ту же ширину, что и экран (чистый CSS), но я хочу сделать его bootstrap совместимым без этой проблемы, поскольку делает контейнер меньше div, а волна выглядит маленькой и странной image 

@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>

1 Ответ

0 голосов
/ 06 августа 2020

Я бы использовал его как фон, который я комбинирую с градиентом: 

@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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...