Question

正如您将从此CodePen中看到的那样，我几乎完成了此功能区菜单。但是，我不能（对于我的生活）弄清楚如何使用CSS添加右侧三角形。当我尝试添加以下代码时，它会在导航菜单下添加一个大的边距：

#menu-nav:after {
 border-color: rgba(0, 0, 0, 0) #008000 rgba(0, 0, 0, 0) transparent;
 border-style: solid;
 border-width: 22px 25px 0px 0px;
 height: 0px;
 left: -10px;
 width: 0px;

}

我知道那些不是正确的边框宽度，但是它仍然应该显示的不仅仅是一个大的底部边缘，对吧？我的CodePen在这里：CodePen

我认为唯一可能导致这种情况与块的定位方式有关。我有#menu-nav:before, #menu-nav:after相对位置。我还是有点新意，所以任何帮助都会受到赞赏。

仅供参考 - 这是我关注的原始教程：http://css3.wikidot.com/blog:wrap-around-ribbons-with-css

Answer 1

简单地，父级必须具有宽度和位置规则，子级位置：绝对

这是一个工作示例

编辑：我检查了你的代码，你将可见性设置为隐藏，添加可见性：可见：在伪元素之后它应该可以工作

Codepen: Ribbons with pseudo elements

.menu{
  width: 100%;
  height: 4em;
  background: #333;
  position: relative;
  padding: 0 2em;
  left: -2em;
}

.menu:after,
.menu:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  border-top: 1em solid #999;
  border-right: 1em solid transparent;
  border-left: 1em solid transparent;
  border-bottom: 1em solid transparent;
}
.menu:before {
  left: 0;
  border-right: 1em solid #999;
}
.menu:after {
  right: 0;
  border-left: 1em solid #999;
}

如何在CSS功能区菜单中制作右侧三角形？

1 个答案: