How to create a custom shape that varies in width - css

Question

In this mockup I have created, I am trying to create a custom arrow shape below each button whenever the mouse hovers over a button on the main navigation. However, the width will vary for each button and I need it to look the same. How would I accomplish this in CSS?
Click Here to see what I am trying to accomplish under 'I'm New' link.
So far, this is what I have in style.css:
.main_nav_inside {
margin: 0 auto;
margin-top: -130px;
position: relative;
z-index: 1;
}
.main_nav_inside ul {
list-style-type: none;
margin: 0;
float: right;
}
.main_nav_inside ul li {
display: inline-block;
float: left;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
}
.main_nav_inside ul li a {
display: block;
top: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
height: 130px;
color: #ffffff;
}
.main_nav_inside ul li a:hover {
padding-bottom: 5px;
width: 100%;
background-color: #2F2F2F;
}
.main_nav_inside ul li a:hover:before {
padding-bottom: 20px;
width: calc(2% + 30px);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
left: inherit;
margin-left: -20px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, 15deg);
z-index: -1;
}
.main_nav_inside ul li a:hover:after {
padding-bottom: 20px;
width: calc(10% / 2);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
right: inherit;
margin-left: -35px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -15deg);
z-index: -1;
}
Here is the HTML for this page as well:
<header id="header_inside">
<div class="main_logo_white"><img src="{{ siteUrl }}/images/ssumc_logo_white.png"></div>
{% set parents = craft.entries.section('menu').level(1).limit(5) %}
<nav class="main_nav_inside">
<ul>
{% nav parent in parents %}
<li>
{{ parent.getLink() }}
{% ifchildren %}
<ul class="dropdown">
<li>{% children %}</li>
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
</nav>
</header>
This website is being built using Craft CMS..not that this matters.

Answer 1

I was able to create the shape using border-top, border-left and border-right. But the bottom tip seems to stay flat and doesn't have a point to it. No matter what numbers you adjust in the border width of top, left or right the tip will stay flat.
.main_nav_inside ul li a:hover:after {
top: 100%;
left: 0;
right: 0;
content: " ";
position: absolute;
border-top: 20px solid #000000;
border-left: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
}