码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS3实现彩色缎带效果

时间:2015-06-03 15:50:38      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:纯css3实现彩色缎带效果

<!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实现彩色缎带效果

标签:纯css3实现彩色缎带效果

原文地址:http://blog.csdn.net/life66881/article/details/46344663

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!