Transparent menu with sections 'cut-out' - html

Question

I'm asked to create a html/css menu such as the following picture:
This looks a simple menu to me, wasn't it by the fact that it has 'cut-out' sections between the menu items. I don't think it's clear from the image but the upper and lower part of the menu are connected with one another. Let me explain that with the use of a picture created in paint:
The grey area's are the 'cut-out' parts I was talking about. The upper and lower part are connected with each other.
I hope this is clear and I'm hoping for someone to help. Thanks in advance!
EDIT:
Herewith some code sample and JSFiddle, this is how far I got.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
.behandelingen-en-prijzen
{
}
.behandelingen-en-prijzen ul li
{
display: inline-block;
padding: 20px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #000;
}

Answer 1

you can do it without using images
HTML
<ul class="cutout">
<li>
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
CSS
body{ background: url(https://i.imgur.com/lsoomRq.jpg); }
.cutout{ list-style: none; padding: 0; border: 3px solid rgba(235, 235, 235, 0.8); }
.cutout, .cutout li{ height: 40px; line-height: 40px; overflow: hidden; }
.cutout li{ float: left; width: 33.33%; text-align: center; }
.cutout a{ display: block; margin-right: 3px; background: rgba(235, 235, 235, 0.8); color: #555; text-transform: uppercase; font-family: sans-serif; text-decoration: none;}
.cutout a:hover{background: #fff}
.cutout li:last-child{ float: right; }
.cutout li:last-child a{margin-right: 0; }

Answer 2

Updated the fiddle: http://jsfiddle.net/a7d9v/3/
Removed padding from li and left 1px, added padding to a and floated the li - left.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li><a class="no-border" href="#">Contact</a></li>
</ul>
</div>
.behandelingen-en-prijzen ul {
list-style: none;
width: 100%;
}
.behandelingen-en-prijzen ul li
{
float: left;
padding: 1px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #fff;
display: block;
padding: 20px;
border-right: 1px solid #fff;
}
.behandelingen-en-prijzen ul li a.no-border {
border: none;
}