J'ai utilisé shapedivider.app sous un en-tête et il y a un écart vraiment petit mais étrange entre eux.

Est-ce que quelqu'un sait comment s'en débarrasser? J'utilise également tailwindcss.

HTML: entrez la description de l'image ici

.custom-shape-divider-top-1599136518 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1599136518 svg {
    position: relative;
    display: block;
    width: calc(166% + 1.3px);
    height: 85px;
}

.custom-shape-divider-top-1599136518 .shape-fill {
    fill: #1A202C;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body class="m-0 bg-gray-800 text-white">
  <div class="m-0 p-0">
      <header class="bg-gray-900 p-5 m-0">
          <nav class="font-mont m-0">
              <ul class="flex justify-between items-center w-full">
                  <li class="text-decoration-none p-2 uppercase font-bold text-2xl"><a href="#">human trafficking</a></li>
                  <div class="flex">
                      <li class="text-decoration-none p-2"><a href="./html/theProject.html">the project</a></li>
                      <li class="text-decoration-none p-2"><a href="./html/aboutUs.html">about us</a></li>
                      <li class="m-0 p-0"><button class="text-decoration-none bg-gray-700 hover:bg-green-600 py-2 px-6 mx-2 rounded-full">contact</button></li>
                  </div>
              </ul>
          </nav>
      </header>
      <div class="relative bg-gray-900">
          <div class="custom-shape-divider-top-1599136518">
              <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                      <path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
                  </svg>
          </div>
      </div>
  </div>
</body>
1
jesper 3 sept. 2020 à 16:26

2 réponses

Meilleure réponse

Cela arrive très souvent avec les SVG. Une solution très simple pour cela est d'ajouter une marge négative ou transform: translateY(-2px);.

Donc, pour vous, cela ressemblerait à quelque chose comme ceci:

.custom-shape-divider-top-1599136518 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: translateY(-2px) rotate(180deg);
}

Ou au lieu de top: 0; utiliser top: -2px;

0
rutgervs 3 sept. 2020 à 13:30

Essayez de supprimer la ligne de rupture entre header et div. Comme </header><div ...>

0
Marco Gonzalo Gómez Pérez 3 sept. 2020 à 13:30