li{
    float: left;
    background: #ccc;
    margin-right: 50px;
}
li > a {
    text-decoration: none;
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0 8px;
}
li > a:before {
    content: '';
    position: absolute;
    border: 20px solid #ccc;
    border-left-color: transparent;
    border-top-color: transparent;
    right: 100%;
    top: 0;
}
li > a:after {
    content: '';
    position: absolute;
    border: 20px solid #ccc;
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%;
    top: 0;
}





li:first-child > a {
    background: #aaa;
}
li:first-child > a:after {
    border-top-color: #aaa;
    border-left-color: #aaa;
}

li:last-child > a {
    background: #ddd;
}
li:last-child > a:before{
    border-right-color: #ddd;
    border-bottom-color: #ddd;
}
li:last-child > a:after {
    border: 0;
}

HTML :

<ul>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
</ul>

#home{
  margin-top: -2%; 
  padding:20px; 
  background:linear-gradient(300deg,transparent 30px,#777 30px);
  }

<div class="col-md-10">
  <div class="topnav" id="navigation" style="margin-top: -2%;">
      <a id="home" class="active" href="MusicFestival.php">Home
        <i class="far fa-arrow-alt-circle-right"></i>
      </a>
      <a style="background-color: blueviolet" href="Friday.php">Friday 
        <i class="far fa-arrow-alt-circle-right"></i>
      </a>
      <a style="background-color: steelblue"href="Saturday.php">Saturday 
        <i class="far fa-arrow-alt-circle-right"></i>
      </a>
        <a style="background-color: lightblue"href="Sunday.php">Sunday 
          <i class="far fa-arrow-alt-circle-right"></i>
          </a>  
  </div>
</div>

.nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: block;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 20px;
}

.nav li a {
  display: block;
  position: relative;
  font: normal 18px/100%;
  text-decoration: none;
  background: #000;
  padding: 0 15px;
  margin: 0 5px;
  line-height: 40px;
  -webkit-text-fill-color: #fff;
}

.nav li:nth-child(1) a {
    background: #005771;
    color: #005771;
}

.nav li:nth-child(2) a {
    background: #710000;
    color: #710000;
}

.nav li:nth-child(3) a {
    background: #147100;
    color: #147100;
}

.nav li:nth-child(4) a {
    background: #716a00;
    color: #716a00;
}

.nav li a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  border: 20px solid;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
}

.nav li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  border: 20px solid;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.nav li a:hover {
  background: #0040ff;
}

.nav li a:hover::before,.nav li a:hover::after {
  border-color: #0040ff;
}

<ul class="nav">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">About Us</a></li>
  <li><a href="javascript:;">Services</a></li>
  <li><a href="javascript:;">Contact Us</a></li>
</ul>