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. asp.net core 系列之Response caching(1)

    这篇文章简单的讲解了response caching: 讲解了cache-control,及对其中的头和值的作用,及设置来控制response caching; 简单的罗列了其他的缓存技术:In-me ...

  2. 【数据挖掘】分类之kNN（转载）

    [数据挖掘]分类之kNN 1.算法简介 kNN的思想很简单:计算待分类的数据点与训练集所有样本点,取距离最近的k个样本:统计这k个样本的类别数量:根据多数表决方案,取数量最多的那一类作为待测样本的类别 ...

  3. 06 nginx Location详解之精准匹配

    一:Location详解之精准匹配 location 语法 location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分, ...

  4. 01 linux上安装 nginx

    一:linux上安装 nginx 下载nginx:wget http://nginx.org/download/nginx-1.6.2.tar.gz 解压:tar zxvf nginx-1.6.2.t ...

  5. Linux中crontab下scp文件传输的两种方式

    Linux下文件传输一般有两个命令scp.ftp(工具需要下载安装) 本文主要讲讲scp的文件传输脚本 1.scp ssh-keygen -t rsa免输入密码,传输 这里假设主机A 用来获到主机B的 ...

  6. Markdown常用语法学习

    Markdown常用语法学习,这些就够用了. 演示地址: https://github.com/YalongYan/Markdown-- 特别提示:  标题'##'后面必须加一个空格,否则编译不对.# ...

  7. 粗体EditorGUI

    GUILayout.Label ("Shading", EditorStyles.boldLabel); EditorGUILayout.Space (); InspectorSu ...

  8. Unity3d监听手机暂停与退出事件

    做移动互联网类型的开放,很多情况得考虑移动设备的暂停与退出时,做某些数据操作或UI. 1,退出事件,Unity3d,InPut就包含了: Input.GetKey(KeyCode.Escape) .  ...

  9. c/c++的一些小知识点3

    ---恢复内容开始--- ---恢复内容结束---

  10. 【BZOJ4070】[Apio2015]雅加达的摩天楼 set+最短路

    [BZOJ4070][Apio2015]雅加达的摩天楼 Description 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼 ...