Custom shape navbar CSS :before, :after

I used :before and :after to create a custom shape navbar, but now my navbar elements are spilling out when resizing to smaller widths, and also I am now limited to single colors for backgrounds to avoid pseudo elements from revealing themselves.

*,
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background-color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Libre Baskerville', serif;
}

nav {
  background-color: #351152;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 1.2em 0 .5em 0;
}

nav::after,
nav::before {
  position: absolute;
  content: '';
  width: 35%;
  height: 1rem;
  background: white;
}

nav::before {
  right: -5%;
  transform: skew(-40deg, 0);
  top: 35;
}

nav::after {
  left: -5%;
  transform: skew(40deg, 0);
  top: 35;
}

nav ul {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  gap: 1.5em;
}

nav ul li {
  list-style: none;
  font-size: 1rem;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li a:hover {
  transition: .2s ease-in-out;
  color: #E09419;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/20c9245509.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
    rel="stylesheet">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="resources/style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="aboutme.html">About Me</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

Is there any other way to create this kind of shape without having these problems?

Solution

Use clip-path;

*,
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background-color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Libre Baskerville', serif;
}

nav {
  background-color: #351152;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.2em 0 0 0;
}

nav ul {
  display: inline-flex;
  justify-content: center;
  gap: 1.5em;
}

nav ul li {
  list-style: none;
  font-size: 1rem;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li a:hover {
  transition: .2s ease-in-out;
  color: #E09419;
}

.nav-before-after {
  width: 25%;
  height: 25px;
  flex: 1 1 0;
}

.nav-before-after > div {
  height: 100%;
  width: 100%;
  background: white;
}

<nav>
   <div class="nav-before-after">
     <div style="clip-path: polygon(0% 50%, 80% 50%, 100% 100%, 0% 100%, 0% 60%);"></div>
  </div>

  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutme.html">About Me</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="nav-before-after">
    <div style="clip-path: polygon(0% 100%, 20% 50%, 100% 50%, 100% 100%, 0% 100%);">E</div>
  </div>
</nav>

Adjust the values to your liking