<!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. node搜索codeforces 3A - Shortest path of the king

    发一下牢骚和主题无关: 搜索,最短路都可以     每日一道理 人生是洁白的画纸,我们每个人就是手握各色笔的画师:人生也是一条看不到尽头的长路,我们每个人则是人生道路的远足者:人生还像是一块神奇的土地 ...

  2. OA系统权限管理设计(转载)

    不论什么系统都离不开权限的管理,有一个好的权限管理模块,不仅使我们的系统操作自如,管理方便,也为系统加入亮点. l         不同职责的人员,对于系统操作的权限应该是不同的.优秀的业务系统,这是 ...

  3. cdoj 574 High-level ancients dfs序+线段树

    High-level ancients Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/s ...

  4. TreeView节点拖拉操作

    //这个拖拽的感觉不对     unit Unit1;interfaceuses  Windows, Messages, SysUtils, Classes, Graphics, Controls, ...

  5. Unity3D脚本--经常使用代码集

    1. 訪问其他物体 1) 使用Find()和FindWithTag()命令 Find和FindWithTag是很耗费时间的命令,要避免在Update()中和每一帧都被调用的函数中使用.在Start() ...

  6. JAXB完毕XML与Java对象的互转

    这段时间都老忙了,甚至连周末全部人员都在赶产品的进度,想想连续上12天班,人都有点晕了! 到这会儿最终有点时间.所以准备和大家分享一下JAXB,会不会有人认为有点陌生呢?没事,这里跟大伙儿简单的描写叙 ...

  7. xtrabackup原理1

    http://www.cnblogs.com/Amaranthus/archive/2014/08/19/3922570.html Percona XtraBackup User Manual 阅读笔 ...

  8. shell脚本分为三类：登录脚本、交互式脚本、非交互式脚本

    shell脚本分为三类:登录脚本.交互式脚本.非交互式脚本 一. 登录脚本类似于windows下的计算机设置中的登录脚本和账户设置下的登录脚本的合集(我是这么理解的哈). 其配置文件的关键词为pref ...

  9. log4net的应用

    1.下载log4net 2编写log4net的配置文件 <?xml version="1.0" encoding="utf-8" ?> <co ...

  10. WORD神操作！第一个技巧你就傻眼了！

    原文:http://mp.weixin.qq.com/s?__biz=MzA4NzkyMDIwNw==&mid=220128483&idx=4&sn=cfa87c941f36f ...