Question

我目前正在尝试使用此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>

但它没有按预期工作。这是我在浏览器中查看页面时得到的结果：

enter image description here

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

Answer 1

您错过了left和right媒体资源：

header:before {
    border-left: 10px solid transparent;
    left: 0;
}
header:after {
    border-right: 10px solid transparent;
    right: 0;
}

使用CSS环绕横幅

1 个答案:

jsFiddle