CSS带状标题

Question

我正在尝试为标题获得带状横幅效果：

我的标记是：

<header>
    <div id="logo">
        <img src="">
    </div>
</header>

我原以为我可以在:before上使用伪:after和<img>元素，在图片上方和下方创建额外的空白区域来伪造扩展的`div：

#logo-wrap img:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: #000;
}

然后是“阴影折叠”的另一个:before和:after伪元素。

我的问题是：如果我最终这样做，我将不得不在div和#logo之间插入另一个<img>，以便添加另一对{{1} }}和:before伪元素用于底部的“阴影折叠”，我认为我在使用:after元素上的伪元素时遇到了问题（没有出现任何内容）。

你可以解决一些问题并引导我朝正确的方向发展吗？或许，有一种简单的方法可以“缩小”<img>？

修改

因此，<header>和:before不能与:after一起使用。感谢您提供的信息：）

我想知道的是，是否有另一种方法可以达到我想要的而不是换行包装？ ：P

ie：有没有办法让<img>大于#logo，尽管它是它的孩子，它的高度是相同的（因为<header>总是与<header>）？

由于

Answer 1

我认为你走在正确的轨道上。我会使用边框，但我会将伪元素放在徽标后面，如下所示：

body,html {margin: 0; padding: 0;}

header {
    background: #eee;
    text-align: center;
    margin: 1em 0;
}

#logo {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: -0.5em 0;
}

#logo:before, #logo:after {
    content: '';
    position: absolute;
    width: 100%;
    left: -0.25em;
    border: 0 solid transparent;
    border-width: 0.5em 0.25em;
    color: #aaa; /* set so we only have to have the border color in one place.
                    if not specified, border color is the same as the text
                    color. */
}

#logo:before {
    border-top: none;
    border-bottom-color: initial;
    top: 0;
}

#logo:after {
    border-bottom: none;
    border-top-color: initial;
    bottom: 0;
}

#logo img {
    position: relative;
    display:block;
    z-index: 1;
}

<header>
    <div id="logo">
        <img src="//placehold.it/300x100?text=LOGO"/>
    </div>
</header>

概念是伪元素是徽标的100％宽度，稍微多一点（由边框属性决定）。然后同时使用左右边框。该代码中还有一些其他技巧可以帮助简化它，但一般的想法是让你的伪元素从徽标本身后面偷看。