让我们重新回到Get Hardboiled网站中的办公室外，门上的便签依然还在，但是有人在上面增加了一行。还记得我们之前的HTML吗？一个article元素？我们将用相同的方式，使用aside元素在里面新增一条。

 
   
Back soon!
 
      
     
         
  • Gone for smokes
    •  
         
  • Getting booze
    •  
         
  • On a job (yeah, really)
    •

我们把第一张便签（article）重新贴到门上，现在用transform来扭曲它。

article { 
transform : skew(-5deg, -2deg); }

1815.tif

试着修改扭曲值，角度的微小变化会带来一些有趣的效果。

现在我们把使用aside便签放到第一张的上方并扭曲它，以使其显得更加突出。

aside { 
position : absolute; 
top : 100px; 
left : 70%; 
z-index : 10; 
transform : skew(5deg, -5deg); }

1816.tif

通过几行简单的CSS，将这两个语义元素转换到设计中，就特别符合Get Hardboiled网站主题了。