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

Question

As you'll see from this CodePen, I am nearly complete with this ribbon menu. However, I cannot (for the life of me) figure out how to add the right-side triangle using CSS. When I attempt to add the following code, it adds a big margin underneath the navigation menu:

#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;

}

I know that those aren't the right border widths, but it should still show something more than a big bottom margin, right? My CodePen is here: CodePen

The only thing I think may be causing this is something to do with how the blocks are positioned. I have the #menu-nav:before, #menu-nav:after positioned relative. I'm still a little new, so any help would be appreciated.

FYI - this is the original tutorial that I was following: http://css3.wikidot.com/blog:wrap-around-ribbons-with-css

Answer 1

Simply the parent must have a width and position rule, and children position: absolute

Here is a working example

EDIT: I checked your code, and you have visibility set to hidden, add visibility: visible to :after pseudo-element and it should work

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;
}