The code snippet above achieves the desired effect.
#overlay {
background-color: rgba(0, 0, 0, 0.66);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon( 0% 0%, /*exterior top left*/
0% 100%, /*exterior bottom left*/
220px 100%, /*overlapping point exterior 1*/
220px 50%, /*overlapping point interior 1*/
220px 310px, /*interior top left*/
683px 310px, /*interior top right*/
683px 450px, /*interior bottom right*/
220px 450px, /*overlapping point interior 2*/
220px 100%, /*overlapping point exterior 2*/
100% 100%, /*exterior bottom right*/
100% 0%);
/*exterior top right*/
}<body>
<div>Some background</div>
<div id="overlay">
</div>
<div id="closeButton">
<p>
Close
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function main() {
$("#overlay").hide();
$("#overlay").fadeIn(500);
$("#closeButton").on("click", function() {
$("#overlay").toggle();
});
}
$(document).ready(main);
</script>
</body>Is there a way to create a reusable function that accepts an array of coordinates to achieve the same effect? This function would be triggered when the closeButton is clicked.