<!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. 极域电子教室 e-Learning Class V4 2010专业版 学生机 卸载方法

    学校的机房一般都会装教师机远程控制学生机的软件.比如我们学校装的就是"极域电子教室 e-Learning Class V4 2010专业版",上课的时候直接强制全屏远控,卸载又提示 ...

  2. PHP AJAXFORM提交图片上传并显示图片源代码

    PHP dofile.php 文件上传源代码 <? php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|p ...

  3. Codeforces Gym 100342D Problem D. Dinner Problem Dp+高精度

    Problem D. Dinner ProblemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1003 ...

  4. angularjs入门学习【应用剖析中篇】

    在上一节讲完了关于应用开发中如数据绑定,加入样式一类的基础操作后,接下来,将在应用中,与控制其有关的一些事件... 一.UI和控制器的分离 我们须要明白控制器在应用中的三个作用: [1]在应用模型中设 ...

  5. Web之真假分页

    在web设计中一个无法避免的问题就是分页显示.当数据量特别大的时候,我们不可能将全部的数据都在一个页面进行显示,假设这样将严重影响到它的美观性.所以在这个时候,分页显示则成为了我们的大功臣.当然分页也 ...

  6. Online DDL与pt-online-schema-change

    http://seanlook.com/2016/05/24/mysql-online-ddl-concept/ http://seanlook.com/2016/05/27/mysql-pt-onl ...

  7. mydumper原理4

    Mydumper是一个针对mysql和Drizzle的高性能多线程备份和恢复工具.开发人员分别来自MySQL,Facebook,SkySQL公司.目前已经在有一些大型产品业务上测试并使用了Mydump ...

  8. 假设用一个名为text的字符串向量存放文本文件的数据，其中的元素或者是一句话或者是一个用于表示段分隔的空字符串。将text中第一段全改为大写形式

    #include<iostream> #include<string> #include<vector> using namespace std; int main ...

  9. Redis 客户端连接

      Redis 通过监听一个 TCP 端口或者 Unix socket 的方式来接收来自客户端的连接,当一个连接建立后,Redis 内部会进行以下一些操作: 首先,客户端 socket 会被设置为非阻 ...

  10. Linux shell 脚本攻略之统计文件的行数、单词数和字符数

    摘自:<Linux shell 脚本攻略>