<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ROTATE效果</title>

    <style type="text/css">

      .box{

    position: relative;

    width: 960px;margin: 0 auto;

    border:1px dashed #ccc;

    height: 560px;

    overflow: hidden;

    font-size:3rem;

    text-align: center;

    color: #fff;

}

.box::before{

    width: 12.5rem;

    height: 1rem;

    z-index: 2;

    color: #fff;

    content: attr(data-text);

    direction: ltr;

    display: block;

    font-size: 1.2rem;

    left: -3.5rem;

    top: 9.2rem;

    line-height: 1rem;

    position: absolute;

    text-align: right;

    text-transform: lowercase;

    -ms-transform:rotate(-45deg);     /* IE 9 */

    -moz-transform:rotate(-45deg);     /* Firefox */

    -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */

    -o-transform:rotate(-45deg);     /* Opera */

    transform:rotate(-45deg);

    -ms-transform-origin: 0 100% 0;

    -moz-transform-origin: 0 100% 0;

    -webkit-transform-origin: 0 100% 0;

    -o-transform-origin: 0 100% 0;

    transform-origin: 0 100% 0;

    white-space: nowrap;

}

.box::after{

    width: 12.5rem;

    height: 5rem;

    z-index: 1;

    content: '';

    background: #F58220;

    position: absolute;

    left: -5rem;

    top: 0;

    display: block;

    -ms-transform:rotate(-45deg);     /* IE 9 */

    -moz-transform:rotate(-45deg);     /* Firefox */

    -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */

    -o-transform:rotate(-45deg);     /* Opera */

    transform:rotate(-45deg);

    box-shadow: 0 0 2px 1px #fff

}

    </style>

</head>

<body>

    <div class="box" data-text="ROTATE效果"></div>

</body>

</html>

用css3做标签的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  3. 利用HTML5 与CSS3 做的放大镜

    利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...

  4. CSS3做动物走路效果

    CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...

  5. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  6. docker tag根据镜像id做标签，用于应用的回滚

    示例 通过ID tag镜像 下面是tag一个id为0e5574283393的本地镜像到“fedora”存储库,tag名称version1.0: docker tag 0e5574283393 fedo ...

  7. css3常用标签

    30个最常用css选择器解析   你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器 ...

  8. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  9. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

随机推荐

  1. HDU 5570 balls 期望 数学

    balls Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5570 De ...

  2. [AngularJS] Html ngSanitize, $sce

    Safely render arbitrary HTML snippets by using ngSanitize and $sce. By default angularJS consider us ...

  3. 向linux内核加入系统调用新老内核比較

    2.6内核 1>改动linux-source-2.6.31/kernel/sys.c文件,在文件末尾加入系统响应函数.函数实现例如以下: asmlinkage int sys_mycall(in ...

  4. 贪心算法(Greedy Algorithm)之最小生成树 克鲁斯卡尔算法(Kruskal&#39;s algorithm)

    克鲁斯卡尔算法(Kruskal's algorithm)是两个经典的最小生成树算法的较为简单理解的一个.这里面充分体现了贪心算法的精髓.大致的流程能够用一个图来表示.这里的图的选择借用了Wikiped ...

  5. Fedora 19安装Fcitx输入法并安装搜狗输入法资源包

    系统自带的Ibus输入法非常的不好用.在Sublime Text下中文根本不能输入.于是想着换成Fcitx. 1.先卸载系统自带的Ibus输入法 sudo yum remove ibus gsetti ...

  6. apache vhost 访问权限配置

    apache的<directory>     </directory>语句,查考如下: 如何访问根目录下的目录http://192.168.1.12/test/ 第一．缺省ap ...

  7. MYSQL查询今天昨天本周本月等的数据

    mysql查询本季度 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT *FROM表名WHERE TO_DAYS ...

  8. VBA-工程-找不到工程或库-解决方案

    近来,越来越多的朋友被“找不到工程或库”的错误所烦恼,所以决定新开一帖来聊聊此问题! QUOTE: 一般情况下,出现此错误是因为找不到引用工程,或找不到与工程语言对应的引用的对象库 出现此类错误可以根 ...

  9. AJAX XMLHttpRequest

    <html> <head> <title>XMLHTTPRequest对象的说明DEMO</title> <script language=&qu ...

  10. jquery ajax 后台和前台数据交互 C#

    <input type="button" id="updateInfo" value="更改货载重量" /> <div i ...