CSS缎带效果
1. [代码]ribbon.html
<!DOCTYPE HTML>
<html>
<head>
<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>动漫flash：http://www.huiyi8.com/donghua/
<div style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</body>
</html>
最新文章
- ffmpeg-201612[01,08,10,17,21,27,30]-bin.7z
- HTML5的 input:file上传类型控制
- 创建一个新的Activity
- python计算文件的md5值
- linux 时间管理——概念、注意点(一)【转】
- Java WebClient 总结
- 阿里云maven加速和docker加速
- 线段树好题（2004集训队林涛PPT中的3题）
- c++中vector的学习
- Hierarchy Viewr 配合 adb 命令 查看窗口属性
- <div> 如何布局两个标签的布局
- hdu1443(约瑟夫环游戏的原理 用链表过的)
- 关于Nexus 7的Usb host开发问题
- shell学习笔记
- Linux c获取任意路径的硬盘使用情况
- 设置MessageBox自动关闭
- 在VUE应用中配置ESLint(代码检查)
- 关于Mysql数据库的知识总结
- GDI+ 和GDI
- 配置nginx为FastDFS的storage server提供http访问接口