<!DOCTYPE HTML>
<html>
<head>
<title>石家庄伸缩门</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>
分享到：
相关推荐
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
使用纯CSS3实现图片轮播效果源码免费下载 使用纯CSS3实现图片轮播效果源码免费下载
随着CSS3+HTML5的发展，现在对它们的需求也越来越大，我这里是纯css3实现的折角效果，希望能帮到大家
纯css3实现的折角效果 纯css3实现的折角效果网页特效.zip
两款纯css3实现的动画菜单
分享纯css3实现时钟效果，供大家一起共同分享学习。
纯CSS3实现超级炫酷3D效果源码下载 纯CSS3实现超级炫酷3D效果源码下载
纯css3实现动态时钟效果适用于钟表网站
纯CSS3实现的翻页效果源码 鼠标悬停在页面上翻页，移开鼠标翻回来。 只支持webkit内核浏览器（如：iphone、ipad、android浏览器，及PC上的Chrome、Safari浏览器）
纯CSS控制实现的拉菜单效果，反复删改，只留下了核心代码，在最大程度上为需要的人留下了空间
纯CSS3实现漂亮的列表效果
纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效
纯CSS3实现按钮动画效果代码是一款里面包含5款不同效果的CSS3按钮特效。
首先非常感谢网友懒人的无私分享，此作品是用纯CSS3实现的，一般的图片幻灯片切换效果都是采用了js脚本实现，就连HTML5技术也不例外，相信很多前端的网友也不敢相信只用纯样式代码而不写上一行js脚本代码就实现了...
纯css3制作Word文本编辑器效果 纯css3制作Word文本编辑器效果
纯css实现的红色自行车效果是一款利用纯CSS3实现的自行车动画，这个自行车是可以运动的，就像有一个人在骑车一样，车轮也会转动，非常逼真的一款动画效果。
纯CSS3按钮3D效果，在鼠标点击按钮时，按钮会有下凹的视觉效果，非常好看。
纯CSS3实现iOS7风格进度条是一款彩色好看的CSS3进度条动画效果。
通过纯CSS3，实现真实翻书动画效果。
纯CSS3实现苹果设备 iPhone iPad iMac iWatch 纯CSS3实现苹果设备 iPhone iPad iMac iWatch