css - 制作具有不同开始、结束和中断的CSS菜单

Question

大家好，希望你们能帮帮我。

在这上面待了一个多小时，快把我逼疯了。

基本上，在 CSS 方面我是一个新手，但我正在学习。目前我正在尝试复制一个如下所示的菜单:

到目前为止我所拥有的看起来像这样(我知道字体不同但没有问题):

如您所见，我了解了背景，但我就是无法弄清楚每个选项卡之间的开始、结束和中断(黑线部分)是如何进行的。

此外，基本上开始、中断、结束我都有 .jpg 图像。不寻找 html5 或 css3 曲线等来执行此操作。只是想保持简单:)。

这就是我到目前为止所得到的。如果您能给我一些关于如何制作剩下的东西的提示，那就太好了，如果我使用了一个不太好的方法，建议一个更好的方法。

html:

    <div id="header">

            <ul id="header-list">
                <li class="header-list-item">
                    <span class= "header-list-item-span" >Home</span>

                </li>

                <li class="header-list-item">
                  <span class= "header-list-item-span" >About Us</span>

                </li>
                <li class="header-list-item">
                   <span class= "header-list-item-span" >Services</span>

                </li>
            </ul>

    </div><!--END OF HEADER -->

CSS:

#header-list{
  display: table;

 position: relative;
 left: -3em;

  table-layout: fixed;
  margin-bottom: 0PX;
  margin-top: 0;
  margin-left: auto;

}

.header-list-item-span{
    background-image: url("img/menubody.jpg");
    color: white;
    display: inline-block;
    width: 5em;
    font-size: large;
    text-align: center;
    padding: .2em;
}

.header-list-item{
     display: table-cell;

 height: 4.2em;
  vertical-align:  bottom;

}

Answer 1

这是一个想法:

将 ul 包裹在 div 中。将第一个 jpg 设置为该 div 的背景图像，并添加一些 padding-left 以便图像可见。将最后一个 jpg 设置为 ul 的背景图片，并添加一些 padding-right 以便图片也可见。

此外，在我看来，您应该通过更多地利用 CSS 选择器来简化 HTML。

标题列表可以选择为div#header > ul。您使用 header-list-item 类选择的元素可以使用 div#header > ul > li 选择。我认为 span 实际上不是必需的，您可以将样式直接应用于 li 元素。