Front End: How to (properly) achieve this masking effect with css - html

Question

I hope this is the right place to post.
I am a a full stack dev with a focus on the backend for the last few years so I am trying to make sure I am approaching this the right way and that there isn't a newer way to do this then my proposed solution below:
See the attached screen shot. This is the main nav for a freelance project I took on. It is not a problem on the pages without a hero image, but where there is a hero, I need the image to be masked as shown. If you can't see it, the selected nav item has a triangle underneath it that is attached to a 2px red line that extends the width of the screen. This triangle is made by this same 2px red line and if there is a hero image, the top of the image is masked by this red line and some white space (about 8 pixels) equal to the height of the triangle.
My Proposed Solution
I was going to have the designer prepare a graphic for me that is a long png, about 3000 by 8, the only transparency being the part underneath the triangle. When the page loads I was going to load the graphic and position it absolutely underneath the selected nav item with JS, masking the image beneath it.
My Question
Is there a better way to achieve this in 2015 - ie clip paths? Is there a good tutorial on the subject - everything I see is for more elaborate things that don't involve added graphics (ie the red line and white mask at the top.
The Effect
EDIT
This is the js I will use to get the proper offset for my lo-fi (2011ish) solution, observant devs will notice the wordpress generated classes:
<script type="text/javascript">
var x = $("#main-nav .current-menu-item a").offset().left;
var y = $("#main-nav .current-menu-item a").offset().top;
var w = $("#main-nav .current-menu-item a").width();
var cx = (x + w / 2);
//get target width and set x offset
tw = $("#masking-selection").width()
tx = cx - (tw/2)
//move the masking item
$("#masking-selection").offset({top: (y+20), left: tx })
</script>

Answer 1

Hope I understand your question. Below is one way to achieve your need.
Note: Adjust to suit your need.
body {
background-color: beige;
padding: 0;
margin: 0;
}
ul {
height: 60px;
width: 100%;
text-align: center;
font-size: 18px;
background-color: white;
border-bottom: solid 1px red;
overflow: hidden
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 0 20px 0 20px;
line-height: 60px;
position:relative
}
li.current:after, li.current:before {
content: '\f0de';
font-family: fontAwesome;
position: absolute;
font-size: 38px;
bottom: -35.09px;
text-align: center;
left: 44%;
color: beige;
}
li.current:before {
color: red;
font-size: 43px;
left: 42.4%;
bottom: -35.5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>How </li>
<li class="current">About us</li>
<li>Contact us</li>
</ul>