51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯CSS3实现彩色缎带效果

时间:2017-08-15 16:06点击:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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 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> 
51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开