Question

jquerymoble.com has section headers that look like they wrap around the edge of the page.
This wrapping effect is achieved 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?

Answer 1

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

It looks as if they are using the CSS border method to create the shape.