html - 带有部分 'cut-out' 的透明菜单

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