透明菜单，部分'切出'

Question

我被要求创建一个html / css菜单，如下图所示：

这对我来说看起来很简单，不是因为它在菜单项之间有“剪切”部分。我不认为从图像中可以清楚地看到，但菜单的上部和下部是相互连接的。让我通过使用在paint中创建的图片来解释：

灰色区域是我所谈论的“切出”部分。上部和下部相互连接。

我希望这很明确，我希望有人帮忙。提前谢谢！

编辑：

这里有一些代码示例和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，将填充添加到a并浮动li - 左。

<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;
}