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 “shadow-fold”的伪元素。

我的问题是:如果我最终这样做，我将不得不插入另一个 div在 #logo 之间和 <img>为了添加另一对 :before和 :after底部“阴影折叠”的伪元素，我想我在 <img> 上使用伪元素时遇到问题元素(什么都没有出现)。

请问您能否阐明一些方向并指导我正确的方向？也许，有一种简单的方法可以“缩小” <header> ？

编辑

所以，:before和 :after不能与 <img> 一起使用.谢谢你的信息:)

我想知道是否有另一种方法可以实现我想要的而不是 wrap-wrap-wrap？ :P

即:有没有办法制作 #logo大于<header>尽管是它的 child 并且它的高度相同(因为 <header> 总是与 <img> 相同的高度)？

谢谢

Answer 1

我认为您走在正确的轨道上。我会使用边框，但我会让你的伪元素像这样位于 Logo 后面:

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>

概念是伪元素是 Logo 的 100% 宽度，还有一点额外(由 border 属性确定)。然后同时使用左右边框。该代码中还有其他一些有助于简化它的技巧，但总体思路是让您的伪元素从 Logo 本身后面窥视。