无法弄清楚jquerymobile.com如何制作他们的节标题

Question

jquerymoble.com的节标题看起来像是围绕页面边缘。 这种包装效果是通过在包含文本的div上方有一个小三角形来实现的。我不能为我的生活找出css创造这个三角形。

如果您有萤火虫，请转到this page并使用此html替换（在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>

他们如何在左边获得包裹效果？

Answer 1

在他们的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);
}

看起来他们正在使用CSS border method来创建形状。