使用CSS环绕横幅(Wraparound Banner with CSS)
我目前正在尝试使用此CSS在我正在处理的网站主题上设置环绕式横幅类型交易：
http://asgeirhoem.no/ex/css-wraparound-ribbon/
我几乎逐字复制了所提到的网站上显示的内容：
（CSS）
header { position: relative; margin: 0 -10px; text-align: center; padding: 10px; background-color: #bb0000; color: white; text-shadow: 2px 2px 0 black; } header:before, header:after { content: ''; border-top: 10px solid #660000; position: absolute; bottom: -10px; } header:before { border-left: 10px solid transparent; } header:after { border-right: 10px solid transparent; }（HTML）
<body> <div class="page-container"> <header> <img src="logo1.png" /> </header> </div> </body>但它没有按预期工作。 这是我在浏览器中查看页面时得到的内容：
正如您所看到的，“环绕式”部分存在，但定位不正确，我不确定为什么会这样。 任何帮助都会很棒。
I'm currently trying to use this CSS to set up a wraparound banner type deal on a website theme I'm working on:
http://asgeirhoem.no/ex/css-wraparound-ribbon/
I've pretty much copied verbatim what's shown on the mentioned site:
(CSS)
header { position: relative; margin: 0 -10px; text-align: center; padding: 10px; background-color: #bb0000; color: white; text-shadow: 2px 2px 0 black; } header:before, header:after { content: ''; border-top: 10px solid #660000; position: absolute; bottom: -10px; } header:before { border-left: 10px solid transparent; } header:after { border-right: 10px solid transparent; }(HTML)
<body> <div class="page-container"> <header> <img src="logo1.png" /> </header> </div> </body>But it's not working as expected. This is what I'm getting when I look at the page in a browser:
As you can see, the "wraparound" sections exist, but are not positioned correctly, and I'm not sure why that is. Any help would be fantastic.
最满意答案
你错过了right物业：
header:before { border-left: 10px solid transparent; left: 0; } header:after { border-right: 10px solid transparent; right: 0; }的jsfiddle
You missed the left and right property:
header:before { border-left: 10px solid transparent; left: 0; } header:after { border-right: 10px solid transparent; right: 0; }jsFiddle
更多推荐
发布评论