•  28-08-2022
  •  | 
  •  

题

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:

enter image description here

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.

有帮助吗？

解决方案

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top