代码如下:

<!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. Grpc helloworld demo的经验

    GreeterGrpc.java这个文件是插件protoc-gen-grpc-java生成的 刚开始直接用类似如下的指令无法生成GreeterGrpc.java文件  protoc --java_ou ...

  2. Lua脚本语言基础知识

      注释 在Lua中,你可以使用单行注释和多行注释. 单行注释中,连续两个减号"--"表示注释的开始,一直延续到行末为止.相当于C++语言中的"//". 多行注 ...

  3. HDU 2639(01背包第K大)

    http://acm.hdu.edu.cn/showproblem.php?pid=2639 http://blog.csdn.net/lulipeng_cpp/article/details/758 ...

  4. MySQL之单表查询练习

    一.emp表 二.练习 1. 查询出部门编号为30的所有员工2. 所有销售员的姓名.编号和部门编号.3. 找出奖金高于工资的员工.4. 找出奖金高于工资60%的员工.5. 找出部门编号为10中所有经理 ...

  5. C# 调用C/C++动态链接库,结构体中的char*类型

    用C#掉用C++的dll直接import就可以之前有不同的类型对应,当要传递结构体的时候就有点麻烦了,这里有一个结构体里边有char*类型,这个类型在C#中调用没法声明,传string是不行的默认st ...

  6. Inter网关做Team的方法

    1.到Inter官网上找到相关驱动程序 2.在安装过程中,要求勾选高级网络 3.驱动安装完成后,打开网卡的属性窗口,在“分组”选项卡中,勾中,并输入Team名称 4.选择需要做Team的网卡 5.选择 ...

  7. 在Ubuntu 14.04.1 LTS 上安装gettext失败

    使用apt-get install -f,因为有额外的依赖.

  8. 关于 Table 表格那些三两事儿

    引言 实现下列表格样式,嵌套与form表单中提交信息,为了让自己的表格可以“ 随心所欲 ” 变换自己的形式,需要两个重要的td 属性colspan 列合并 以及 rowspan 行合并 来实现,表格宽 ...

  9. MongoDB 投影

    mongodb 投影意思是只选择必要的数据而不是选择一个文件的数据的整个.例如一个文档有5个字段,只需要显示其中3个 find() 方法 在MongoDB中,当执行find()方法,那么它会显示一个文 ...

  10. WPF使用样式更新ArcGis InfoWindow外观代码

    <Style x:Key="mainInfoWindowStyleMF" TargetType="{x:Type esri:InfoWindow}"> ...