<!DOCTYPE HTML>
<html>
<head>
<title>纯CSS3缎带效果</title>
<style type="text/css">
.ribbon-content{border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;line-height: 30px;}
.ribbon-left{display: block;border-left: 10px solid white;border-top: 8px solid #EEE;float: left;height: 0;margin-left: -10px;width: 0;}
.ribbon-right{display: block;border-right: 10px solid white;border-top: 8px solid #EEE;float: right;height: 0;margin-right: -10px;width: 0;}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div style="margin: 0 auto; width: 200px;">
<div class="ribbon" style="background: whiteSmoke;">
<div class="ribbon-content" style="background: whiteSmoke;">标题</div>
<div class="ribbon-left"></div>
<div class="ribbon-right"></div>
</div>
<div style="background: whiteSmoke;">内容显示区：这像不像一个彩缎的头部？<br>内容显示区内容显示区内容显示区内容显示区内容显示区内容显示区内容显示区</div>
</div>
</body>
</html>纯CSS3实现彩色缎带效果
原文：http://blog.csdn.net/life66881/article/details/46344663
