在网页的右上角放置一个三角形广告区域，是不影响页面整体效果，但又引人注意的一种静态广告方式。但通常这么做都会用一个图片来做，其结果是点击区域变得过宽，甚至还对浏览器有所挑剔。可能这样的结果恰好增大了可供点击的区域，但它实际上并不反映事实。
幸运的是，CSS3能够帮你的忙。
本文所有代码均来自http://www.impressivewebs.com/page-corner-ads-css3/，如果您对其中的任何技术细节存在疑问，请以原文为准。
问题回顾
传统的页角广告做法是这样的，放置一个z-index值非常高的图片，通过设定其定位方式position为absolute，将其放置在右上角的位置。
这样的效果从视觉上来说没什么问题，但它实际上让用户的实际操作和视觉效果脱离了，本来并不属于页角的部分变成了页角的一部分。可能这无伤大雅，但它终究不是我们所希望的。
CSS3 的策略
非常幸运，CSS3当中有一项新特性，那就是能够将元素旋转。
#corner-ad {
display: block;
width: 200px;
height: 200px;
position: absolute;
top: -100px;
right: -100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
上面的代码能够将一个普通的块级元素旋转45度，而这就是我们真正想要做的。现在，页角的点击区域已经和视觉范围相吻合了。
IE怎么办
IE总是这么讨厌。CSS3的旋转在IE9当中才开始支持，6、7、8都对这个方案不感冒。因此，我们需要增加一些IE专有的代码来保证视觉效果的一致：
#corner-ad {
top: -142px\9;
right: -60px\9;
*right: -140px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
zoom: 1;
}
好在这些代码对IE通吃。
