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>

CSS缎带效果的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  5. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

随机推荐

  1. opencv--python--anaconda----contrib 安装

    https://pypi.python.org/pypi/opencv-python/3.4.0.12 https://pypi.python.org/pypi?%3Aaction=search&am ...

  2. hdu 3367 Pseudoforest（并查集）

    题意:有一种叫作Pseudoforest的结构,表示在无向图上,每一个块中选取至多包含一个环的边的集合,又称“伪森林”.问这个集合中的所有边权之和最大是多少? 分析:如果没有环,那么构造的就是最大生成 ...

  3. centos7设置ip

    centos7不能再通过setup命令来设置ip了,但可以通过修改网卡配置文件来设置ip 在/etc/sysconfig/network-scripts目录下找到网卡配置文件,修改之前内容如下 TYP ...

  4. Git客户端搭建环境（Windows系统）的使用

    本文环境: 操作系统:Windows XP SP3 Git客户端:TortoiseGit-1.8.8.0-32bit 一.安装Git客户端 全部安装均采用默认! 1. 安装支撑软件 msysgit:  ...

  5. windowsphone8.1学习笔记之位图编程

    说位图,先把image控件简单过下,Image的Source设置 <Image Name="img" Source="可以是网络图片的Uri.应用文件的Uri或者安 ...

  6. iOS UICollection 和UITableview新特性

    很详细优秀的博客: http://www.jianshu.com/p/e97780a24224 iOS10新特性总结 http://blog.csdn.net/yyacheng/article/det ...

  7. Zookeeper Curator 事件监听 - 秒懂

    目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...

  8. 原来还有cookie-free domain这么回事

    cookie-free domain的解释:在请求下载静态小图片.静态小文件的时候,浏览器会把它当成普通请求一样,在request的header信息里附加cookie信息. 但实际上,99.99%的静 ...

  9. ubuntu查看Mysql是否已启动

    sudo netstat -tap | grep mysql 命令行输出: tcp6       0      0 [::]:mysql              [::]:*             ...

  10. java上传文件，下载文件

    1.上传文件 1 protected int doTask(BaseForm form) throws AppException, FatalException, NoExistsException, ...