<!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. 微设计（www.weidesigner.com）介绍系列文章(一)

    1.1 什么是微设计? 微设计(www.weidesigner.com)是一个专门针对微信公众账号提供营销推广服务而打造的第三方平台.主要功能是针对微信商家公众号提供与众不同的.有针对性的营销推广服务 ...

  2. 开始学习web前端技术

    不能再蹉跎了,不能再徘徊了,不能再犹豫了,犹豫徘徊等于白来…… 感觉之前浪费了太多的岁月,必须得学习一门实用的技术来充实自己空虚的心情了. 想来想去网页应该是万金油的,大大小小多多少少都得用到.既然如 ...

  3. C#操作Word （1）Word对象模型

    Word对象模型  (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object ...

  4. 数据挖掘十大经典算法(9) 朴素贝叶斯分类器 Naive Bayes

    贝叶斯分类器 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.眼下研究较多的贝叶斯分类器主要有四种, ...

  5. PhpStorm, XDebug, and DBGp Proxy

    phpstorm 利用 xdebug.dbgp-proxy配置远程调试 1.单客户机远程调试 a.安装xdebug库文件(windows:php_xdebug.dll;linux:php_xdebug ...

  6. mysql备份工具 ：mysqldump mydumper Xtrabackup 原理

    备份是数据安全的最后一道防线,对于任何数据丢失的场景,备份虽然不一定能恢复百分之百的数据(取决于备份周期),但至少能将损失降到最低.衡量备份恢复有两个重要的指标:恢复点目标(RPO)和恢复时间目标(R ...

  7. 日志管理 rsyslog服务浅析

    http://www.xiaomastack.com/2014/11/13/rsyslog/

  8. 1015. Reversible Primes (20)

    the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1015 this pro ...

  9. Android之自定义AlertDialog无法监听控件

    参考:http://www.cnblogs.com/511mr/archive/2011/10/21/2220253.html 要做一个自定义的弹出框,以前都是用一个Activity来实现,总觉得不是 ...

  10. 升级时出现：请先升级 UCenter 到 1.6.0 以上版本。

    有的站点UCenter升级完成后仍然提示请先升级 UCenter 到 1.6.0 以上版本的现象,下面分享下UCenter版本号不正确的原因和处理办法,可能有以下的几个文件和处理办法: 一.UCent ...