最近发现CSS可以做出角落丝带的效果，用transform:rotate属性就行。
先放张效果图：
放代码：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>Corner Ribbon with CSS3 Example</title> <style type="text/css"> .ribbon { background-color: #a00; overflow: hidden; white-space: nowrap; /* top left corner */ position: absolute; left: -50px; top: 40px; /* for 45 deg rotation */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* for creating shadow */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 100% ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* for creating shadow */ text-shadow: 0 0 5px #444; } </style> </head> <body> <div class="ribbon"> <a href="#">Hello Yojiaku</a> </div> </body> </html>
加上自己想要的样式，怎样，是不是敲简单！
只是将一个div翻转了45度而已。
原文：http://www.cnblogs.com/yojiaku/p/5743512.html