Css3 实现丝带效果

代码如下：

<!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 实现丝带效果的更多相关文章

Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
第八十节，CSS3边框图片效果
CSS3边框图片效果学习要点: 1.属性初探 2.属性解释 3.简写和版本本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
css图片上悬浮文字（丝带效果）实现
首先看效果思路:1.去掉“丝带“菱角使用的是overflow: hidden; 2.通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果(z-index需要写在有position的 ...
测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

随机推荐

(JSP)关于手机端（尤其是苹果手机）pdf文件无法打开的解决方案
流的方式下载附件  <%@page import= ...
ETL第一篇(Kettle Spoon) 初遇
ETL第一篇(Kettle Spoon) 初遇 ETL第二篇调用webservice 简介 Kettle 是一款国外开源的 ETL 工具,纯 Java 编写,绿色无需安装,数据抽取高效稳定(数据迁移 ...
HDU 2553(N皇后)（DFS）
http://acm.hdu.edu.cn/showproblem.php?pid=2553 i表示行,map[i]表示列,然后用DFS遍历回溯可以参考这篇文章: http://blog.csdn. ...
BZOJ3529: [Sdoi2014]数表(莫比乌斯反演树状数组)
题意题目链接 Sol 首先不考虑\(a\)的限制我们要求的是 \[\sum_{i = 1}^n \sum_{j = 1}^m \sigma(gcd(i, j))\] 用常规的套路可以化到这个形式 ...
如何使DIV居中
小编我抛出一个问题: 有一个 div#wrapper 元素,高.宽度都未知.它其中有一个宽高都为 100px 的 div#box 元素,请你完成 CSS,使得 div#box 在 div#wrappe ...
CentOS7运维管理笔记(12)----修改主机名
CentOS修改主机名 CentOS7和CentOS6.5 修改主机名的方法略有不同. 通过 hostname 命令可以查看当前的主机名. 1. 临时修改主机名通过 'hostname 新的主机名' ...
自动生成了一本ES6的书
![WeChat_1462668550.jpeg](http://upload-images.jianshu.io/upload_images/1952818-7bd17a9dd6401dc6.jpe ...
第8课网络数据读取测试-TinyWebDB
TinyWebDB是在线小型数据库,通过它的使用,可以将数据保存在网络,实现排行榜等功能. 实现功能:读入数据并保存,读出数据并显示. 1.组件设计 TinyWebDB1:非可视化,借用网 ...
HTML5-入门。
什么是HTML5? HTML5是超文本语言,不是编程语言,html5是html语言的最新版本,需要注意浏览器的兼容性问题. HTML5技术一般是指的是HTML5.CSS3.JavaScript三种技术 ...
[翻译] KVNProgress
KVNProgress KVNProgress is a fully customizable progress HUD that can be full screen or not. KVNProg ...

Css3 实现丝带效果

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

随机推荐

热门专题