Html 使用：Before和：After将图像添加到我的导航的末尾？

想知道这是否是将图像添加到导航开始和结束的最佳方法。目前，我的导航如下所示：

但实际上，我想在它的边缘添加这个角块：

以下是我尝试实现它的CSS：

#menu-top {
    position:relative;
    margin:0 -10px 0;
    padding:.25em 0 0;
    border-width:0;
    color:#fff;
    text-align:left;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontalbannermiddletop.png );

    min-height:50px;
}
#menu-top:before {
    content:'';
    z-index: 20;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
    position:absolute;
    left:0;
    /* bottom:-5px; */
    bottom: 0px;
    width:0;
    height:0;
    display:block;
    border-color:transparent #222 transparent transparent;
    border-style:solid;
    border-width:0px 10px 5px 0;
}
#menu-top:after {
    content:'';
    position:absolute;
    right:0;
    bottom:-5px;
    width:0;
    height:0;
    display:block;
    border-color:transparent transparent transparent #222;
    border-style:solid;
    border-width:0 0 5px 10px;
}
#menu-top ul {
    position:relative;
    margin:0;
    padding:.5em 30px;
    list-style-type:none;
    text-align:center;
}
#menu-top ul:before {
    content:'';
    position:absolute;
    top:4px;
    left:-5px;
    width: 34px;
    height: auto;
    display:block;
    background: url( http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png );
}
#menu-top ul:after {
    content:'';
    position:absolute;
    top:4px;
    right:-5px;
    width:27px;
    height:39px;
    display:block;
}
#menu-top li {
    display:inline;
    margin:0 .25em 1em;
    padding:0;
    line-height:2.5em;
}
#menu-top li a {
    background-color: #111;
    color: #e9d6d6;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    outline: 0;
    padding: .45em .6em;
    white-space: nowrap;
    -webkit-transition: background-color, -webkit-box-shadow 0.2s linear;
}
#menu-top li a:hover,
#menu-top li a:active {
    text-decoration:none;
}

---

我是否使用了：Before和：After错误？

您可以通过多种方法来实现这一点，包括使用伪元素。在下面，我在

nav

元素的左上角和右上角放置了两个元素。然后，我指定了新的背景图像，并将元素向右翻转，使其在左侧镜像：

nav{
位置：相对位置；
宽度：703px；高度：45px；
背景：url（“http://i.stack.imgur.com/PMV59.png");
}
导航：：之前，导航：：之后{
内容：“；
显示：块；
宽度：95px；高度：50px；
位置：绝对；顶部：-8px；左侧：-5px；
背景：url（“http://i.stack.imgur.com/IqsBV.png");
}
导航：之后{
左：自动；右：-5px；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
变换：旋转（180度）；
}

其结果如下：

我应该注意，之所以使用

transform

属性，是因为您只提供了左角图像。Internet Explorer 8不支持此属性（它支持

：before

和

：after

）。如果您希望以上内容支持IE8，则需要放弃

转换

，而是为

：after

伪元素提供不同的背景

---

演示：

当伪元素的维度为0x0时，您将无法看到背景图像。