•  28-08-2022
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top