使用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)

但它没有按预期工作.这是我在浏览器中查看页面时得到的内容:

正如您所看到的,"环绕式"部分存在,但定位不正确,我不确定为什么会这样.任何帮助都会很棒.