用css3做标签
2016-05-25 13:10
525 查看
<!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特性浏览器兼容 封装less
- CSS写大叉和红心
- CSS border实现各个方向等腰直角三角
- css3,background-color:背景缩放
- CSS3,背景透明
- CSS3的内径剪切问题(背景边框是虚线)
- 纯css三级导航
- css3的背景坐标
- 用css3写一个iPhone手机案例
- 【前端开发】CSS中的优先级
- ActionBar样式解析
- CSS选择器的权重与优先规则
- CSS3颜色特征温故
- pyc php js echarts css 数据挖掘感悟 2016.05.24回顾
- css3设置高斯模糊
- 在css中最常用的长度单位
- Animate CSS
- 改变状态栏样式
- 美化加载失败的图片(Stying broken images)
- An Introduction to the Basics of Modern CSS Buttons