cant figure out how jquerymobile.com makes their section headers

jquerymoble.com has section headers that look like they wrap around the edge of the page. This wrapping effect is achi开发者_运维问答eved by having a little triangle above the div containing the text. i cannot for the life of my figure out what css creates this triangle.

If you have firebug, go the this page and replace (in html edit mode) the entire body tag with this html:

<header id="header">      
   <section id="page">
  <p class="flag"><em><a style="color: rgb(0, 0, 0);" href="http://jquerymobile.com/2010/11/jquery-mobile-alpha-2-released/">jQuery Mobile 1.0 Alpha 2 Released!</a></em></p>
  </section>
</header>

how do they get that wrapping effect on the left?

In their CSS:

#page .flag:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 3px #fff;
  border-color: transparent #FFC32C #FFC32C transparent;
  position: absolute;
  top: -7px;
  left: -7px;
  -webkit-transform: skew(10deg,0deg) translate(-1px,0);
  transform: skew(10deg,0deg);
}