代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin: 0; padding:0;}

        body,html{

            font-size:14px;

        }

        .box{

            margin:50px auto;

            width:300px;

            height:300px;

            background-color: #ffffff;

            position: relative;

            -webkit-border-radius: 6px;

            -moz-border-radius: 6px;

            border-radius: 6px;

            -webkit-box-shadow: 0 0 5px #999999;

            -moz-box-shadow: 0 0 5px #999999;

            box-shadow: 0 0 5px #999999;

        }

        .ribbon{

            position: absolute;

            top:0;

            right:0;

        }

        .banner{

            position: relative;

            float: right;

            display: block;

            width:100px;

            color: #ffffff;

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

            top:22px;

            right:-14px;

        }

        .banner:before,.banner:after{

            content: '';

            position: absolute;

            width:30px;

            height: 12px;

            display: block;

            background-color: #ff321c;

        }

        .banner:before{

            left: -45px;

            -webkit-transform: skewY(-45deg) translate(50%, 15px);

            -moz-transform: skewY(-45deg) translate(50%, 15px);

            -ms-transform: skewY(-45deg) translate(50%, 15px);

            -o-transform: skewY(-45deg) translate(50%, 15px);

            transform: skewY(-45deg) translate(50%, 15px);

            -webkit-transform-origin:100% center;

            -moz-transform-origin:100% center;

            -ms-transform-origin:100% center;

            -o-transform-origin:100% center;

            transform-origin:100% center;

        }

        .banner:after{

            right: -17px;

            -webkit-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);

            -moz-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);

            -ms-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);

            -o-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);

            transform: translate(100%, -100%) skewY(45deg) translateX(-58%);

            -webkit-transform-origin:0 center;

            -moz-transform-origin:0 center;

            -ms-transform-origin:0 center;

            -o-transform-origin:0 center;

            transform-origin:0 center;

        }

        .text{

            position: relative;

            padding:6px 0;

            z-index: 2;

            min-height:18px;

            line-height:18px;

            white-space: nowrap;

            -ms-text-overflow: ellipsis;

            text-overflow: ellipsis;

            text-align: center;

            text-transform: capitalize;

        }

        .text:before,.text:after{

            content: '';

            display: block;

            height: 30px;

            position: absolute;

            top: 0;

            width: 100%;

            z-index: -1;

            background-color: #ff604f;

        }

        .text:before{

            -webkit-transform: translateX(-15%) skewX(-45deg);

            -moz-transform: translateX(-15%) skewX(-45deg);

            -ms-transform: translateX(-15%) skewX(-45deg);

            -o-transform: translateX(-15%) skewX(-45deg);

            transform: translateX(-15%) skewX(-45deg);

        }

        .text:after{

            -webkit-transform: translateX(15%) skewX(45deg);

            -moz-transform: translateX(15%) skewX(45deg);

            -ms-transform: translateX(15%) skewX(45deg);

            -o-transform: translateX(15%) skewX(45deg);

            transform: translateX(15%) skewX(45deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="ribbon">

            <div class="banner">

                <div class="text">

                    happy new year

                </div>

            </div>

        </div>

    </div>

</body>

</html>

注:

text-transform: capitalize;　　　　//首字母大写
text-transform: uppercase;　　　　//字母全部大写
text-transform: lowercase;　　　　//字母全部小写

效果如下：

Css3 实现丝带效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  4. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  5. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  6. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  7. css图片上悬浮文字（丝带效果）实现

    首先看效果 思路:1.去掉“丝带“菱角使用的是overflow: hidden; 2.通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果(z-index需要写在有position的 ...

  8. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  9. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

随机推荐

  1. 最简单的java多线程代码（重写thread或者runnable的run方法）

    http://blog.csdn.net/testcs_dn/article/details/42526549 java线程使用示例——最简单的线程 线程使用示例一: [java] view plai ...

  2. eclipse中实现文本换行

    Eclipse 使用系统内置的“ Text Editor ”做为文本编辑器,这个文本编辑器有一个问题,就是文本无法换行. 扩展插件 WordWrap 可以实现文本换行         安装方法:    ...

  3. Maven学习总结（四）：更改maven的编码格式方式

    安装系统之后,一般中文系统默认字符集是GBK.我们安装的软件一般都继承使用操作系统的默认字符集.所以当在中文XP或者win7系统开发,在使用maven(mvn compile)编译项目的时候,就会出现 ...

  4. window.addEventListener绑定事件记得删除

    在做postMessage通信时,window.addEventListener绑定的事件记得要remove掉 就和setTime一样,不然占用内存资源

  5. Linux入门-7 Linux管道、重定向以及文本处理

    Linux管道.重定向以及文本处理 1 Linux多命令协作:管道及重定向 管道和重定向 2 Linux命令行文本处理工具 文件浏览 基于关键字搜索-grep 基于列处理文本-cut 文本统计-wc ...

  6. 沉淀再出发：如何在eclipse中查看java的核心代码

    沉淀再出发:如何在eclipse中查看java的核心代码 一.前言   很多时候我们在eclipse中按F3键打算查看某一个系统类的定义的时候,总是弹出找不到类这样的界面,这里我们把核心对应的代码加进 ...

  7. 5 hbase-shell + hbase的java api

    本博文的主要内容有 .HBase的单机模式(1节点)安装 .HBase的单机模式(1节点)的启动 .HBase的伪分布模式(1节点)安装  .HBase的伪分布模式(1节点)的启动    .HBase ...

  8. java.lang.UnsatisfiedLinkError: /usr/openv/java/jre/lib/amd64/libawt_xawt.so: libXtst.so.6: cannot open shared object file: No such file or directory

    解决办法: 在radhat 或者centos系统中运行一下命令即可:yum install libXext.x86_64yum install libXrender.x86_64yum install ...

  9. [BZOJ 3514]Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES)

    [BZOJ3514] Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES) 题意 \(N\) 个点 \(M\) 条边的无向图,\(K\) 次询问保 ...

  10. codeforces 388D Fox and Perfect Sets（线性基+数位dp）

    #include<bits/stdc++.h> using namespace std; #define fi first #define se second #define mp mak ...