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. Angular Material表单提交及验证

    AngularJS中一些表单验证属性: 修改过的表单,只要用户修改过表单,无论输入是否通过验证,该值都将返回false{formName}.{inputFieldName}.$dirty 合法的表单, ...

  2. phalcon builder 用法

    $rawSql = $builder->columns(["aa","bb"]) ->from("TableName") -&g ...

  3. 安装android Studio和运行react native项目（跳坑篇）

    1.需配环境变量,值为sdk的地址. ANDROID_HOME  值:E:\Users\HP\AppData\Local\Android\sdk 2.下载gradle-2.14.1-all.zip 包 ...

  4. （一）unity4.6Ugui中文教程文档-------概要

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  5. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. json.dumps(i['bd_res'], ensure_ascii=False)

    json.dumps(i['bd_res'], ensure_ascii=False) import xlrd import time import sys import os import requ ...

  7. 最简单的 GitExtensions 教程（持续更新中）

    一.安装 GitExtensions 下载 GitExtensions 完全版,一直点 Next,安装全部组件. 二.将项目文件夹/文件提交到 Git 服务器(以 GitHub 为例) 新建一个文件夹 ...

  8. [luogu3767]膜法

    [luogu3767]膜法 luogu 神仙题 线段树分治+带权并查集 把每个操作看成点 首先这个操作的结构是一棵树 你发现每个点的对它的子树产生影响 我们可以想到用dfn序把它转成一段区间用线段树分 ...

  9. [note]树链剖分

    树链剖分https://www.luogu.org/problemnew/show/P3384 概念 树链剖分,是一种将树剖分成多条不相交的链的算法,并通过其他的数据结构来维护这些链上的信息. 最简单 ...

  10. 我的Android进阶之旅------> Android在TextView中显示图片方法

    面试题:请说出Android SDK支持哪些方式显示富文本信息(不同颜色.大小.并包含图像的文本信息),并简要说明实现方法. 答案:Android SDK支持如下显示富文本信息的方式. 1.使用Tex ...