<!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. 在WCF中不使用svc文件直接使用cs文件

    在 配置中有个节点可以实现 此功能 <serviceHostingEnvironment multipleSiteBindingsEnabled="true" > &l ...

  2. JQuery Plugin 2 - Passing Options into Your Plugin

    overriding the default options with user-supplied options and the jQuery extend() method eg: $.fn.pu ...

  3. jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...

  4. 关于在android手机中腾讯、阿里产品不自定义虚拟键盘的想法

    1,自定义虚拟键盘,影响用户体验.你每个用户的喜好不一样,都有自己心仪的一款输入法.腾讯或是阿里设计出来的输入法很难满足上亿用户的喜好,到时候又是一场口水战,再说了就是专业的输入法肯定要比应用里嵌套的 ...

  5. Spark wordcount 编译错误 -- reduceByKey is not a member of RDD

    Attempting to run http://spark.apache.org/docs/latest/quick-start.html#a-standalone-app-in-scala fro ...

  6. asp.net常用函数

    ASP.NET网络编程中常用到的27个函数集 Abs(number) 取得数值的绝对值.   Asc(String) 取得字符串表达式的第一个字符ASCII 码.   Atn(number) 取得一个 ...

  7. Java_eclipse软件与git配合使用创建git仓库

    一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name,location;点击-->ok ...

  8. Spirng_Batch

    一.需求分析 使用Spring Batch对XML文件进行读写操作: 从一个xml文件中读取商品信息, 经过简单的处理, 写入另外一个xml文件中. 二.代码实现 1. 代码结构图: 2. appli ...

  9. c语言指针函数与函数指针

    例一:指针函数 指针函数是指带指针的函数,即本质是一个函数.函数返回类型是某一类型的指针 类型标识符    *函数名(参数表) int *f(x,y); 首先它是一个函数,只不过这个函数的返回值是一个 ...

  10. 小白日记40：kali渗透测试之Web渗透-SQL手工注入（二）-读取文件、写入文件、反弹shell

    SQL手工注入 1.读取文件[load_file函数] ' union  SELECT null,load_file('/etc/passwd')--+ burpsuite 2.写入文件 ' unio ...