CSS3 draw circle in middle of nav with overhand - html

Question

I'm not the greatest at CSS and I'm looking to do something like this:
I have a feeling I need to use ::after and content: ' ' to achieve this along with a border-radius: 50%;
.nav {
position: fixed;
left: 50%;
}
.nav::after {
content: ' Hi ';
background-color: rgba(0, 0, 0, 0.5) !important;
box-shadow: 0px 1px 8px 1px #222222;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: fixed;
height: 7.5em;
width: 10em;
transform: translateX(-50%);
transform: translateY(40%);
z-index: 2;
}
<div class="nav"></div>

Answer 1

I don't believe you can use a single HTML Element to achieve this effect. Check this out, though:
#outer {
width: 300px;
height: 225px;
background-color:#ccc;
position: relative;
}
#rounded, #leftbox, #rightbox {
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
position: absolute;
top: 10px;
}
#rounded {
width: 200px;
height: 200px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
left: 50px;
}
#leftbox, #rightbox {
width: 50px;
height: 100px;
}
#leftbox {
left: 0;
}
#rightbox {
right: 0;
}
<div id='outer'>
<div id='leftbox'></div>
<div id='rounded'></div>
<div id='rightbox'></div>
</div>
Personally, I would use a transparent Image overlay, for backward compatibility, instead of this technique.