CSS ribbon-like header

Question

我正在尝试为 header 获得 ribbon-like 横幅效果：

我的标记是这样的：

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

我想我可以在 <img> 上使用伪 :before 和 :after 元素，在图像上方和下方创建额外的白色 space 来伪造扩展 ` div:

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

然后 "shadow-fold".

的另一个 :before 和 :after 伪元素

我的问题是：如果我最终这样做，我将不得不在 #logo 和 <img> 之间插入另一个 div 以添加另一对 :before 和 :after 伪元素用于底部 "shadow-fold"，我认为我在 <img> 元素上使用伪元素时遇到问题（没有出现）。

你能给我一些启示并指引我正确的方向吗？也许，有一个简单的方法来 "shrink" <header>?

编辑

因此，:before 和 :after 不能与 <img> 一起使用。谢谢你的信息:)

我想知道的是，除了wrap-wrap-wrap之外，是否还有其他方法可以达到我想要的效果？ :P

即：有没有办法让 #logo 比 <header> 大，尽管它的 child 和高度相同（因为 <header> 有始终与 <img>) 的高度相同？

谢谢

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% 宽度，并有一点额外（由边框属性确定）。然后同时使用左右边框。该代码中还有其他一些有助于简化它的技巧，但总体思路是让您的伪元素从徽标本身后面窥视。

CSS ribbon-like header

CSS ribbon-like header

html

css

pseudo-element