How to change the rest of background-color when words are rotated with it

Question

I have a navbar and I need to rotate words. That's what I did, but when I rotate it, it will be rotated even with hover and then there are these little space of background-color that are of original color. How do I change the rest of the space to black color?

here is a picture: https://i.sstatic.net/KbEGm.png

.navbar {
  background-color: chocolate;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 5em;
  line-height: 70px;
}


/* Styly pro odkazy v navbaru */

.navbar a {
  color: white;
  padding: auto;
  text-decoration: none;
  font-size: 1.25em;
  flex: 1;
  transform: rotate(-10deg);
}


/* Styly pro odkazy při najetí myší */

.navbar a:hover {
  background-color: black;
  color: white;
}

<header>
  <nav class="navbar">
    <a href="#">Domů</a>
    <a href="#">O nás</a>
    <a href="#">Služby</a>
    <a href="#">Galerie</a>
    <a href="#">Kontakt</a>
  </nav>
</header>

Answer 1

You can use a pseudo-element (e.g. :after) and position it below using z-index: -1;

.navbar {
  background-color: chocolate;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 5em;
  line-height: 70px;
}


/* Styly pro odkazy v navbaru */

.navbar a {
  color: white;
  padding: auto;
  text-decoration: none;
  font-size: 1.25em;
  flex: 1;
  transform: rotate(-10deg);
}


/* Styly pro odkazy při najetí myší */

.navbar a:hover {
  color: white;
}

.navbar a:hover:after {
    content: "";
    display: block;
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transform: rotate(10deg);
    z-index:-1;
}

<header>
  <nav class="navbar">
    <a href="#">Domů</a>
    <a href="#">O nás</a>
    <a href="#">Služby</a>
    <a href="#">Galerie</a>
    <a href="#">Kontakt</a>
  </nav>
</header>