CODEWITHSUNDEEP
htmlcssstylesheetbanner
MisutoWolf
MisutoWolf

Reputation: 1233

Wraparound Banner with CSS

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.

Upvotes: 2

Views: 2607

Answers (1)

nkmol
nkmol

Reputation: 8091

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

Upvotes: 5

Related Questions