Прозрачное меню с разделами «выреза»

Question

Я попросил, чтобы создать меню HTML/CSS, такие как следующее изображение:

Это выглядит простое меню для меня, не так ли по тому, что он имеет разделы «вырезания» между пунктами меню. Я не думаю, что это ясно из изображения, но верхняя и нижняя часть меню связаны друг с другом. Позвольте мне объяснить, что с использованием изображения, созданного в краске:

Серо района являются «вырезать из» части я говорил. Верхняя и нижняя части связаны друг с другом.

Надеюсь, это ясно, и я надеюсь, что кто-то поможет. Заранее спасибо!

EDIT:

При этом некоторые образцы кода и JSFiddle, это насколько я получил.

<div class="behandelingen-en-prijzen"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></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

вы можете сделать это без использования изображений

HTML

<ul class="cutout"> 
    <li> 
     <a href="#">home</a> 
    </li> 
    <li> 
     <a href="#">about</a> 
    </li> 
    <li> 
     <a href="#">contact</a> 
    </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

Обновлено скрипку: http://jsfiddle.net/a7d9v/3/

Удалено прокладка от li и левая 1px, добавлена ​​прокладка к а и поплавка li-left.

<div class="behandelingen-en-prijzen"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></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; 
}