CSS实现文字旋转/实现角标
主要用到属性transform:rotate(-30deg)
example:
.divedittable .project-tag div {
width: 43px;
line-height: 43px;
text-align: center;
color: #fff;
font-size: 12px;
transform: rotate(-45deg);
}
.divedittable .design-tag {
background-image: url('../images/icons.png');
background-position: -65px 62px;
width: 53px;
height: 53px;
display: inline-block;
}
.divedittable .design-tag div {
width: 43px;
line-height: 43px;
text-align: center;
color: #fff;
font-size: 12px;
transform: rotate(-45deg);
}
效果图:文字放在图片上,实现角标功能

参考:
http://blog.csdn.net/fengqingtao2008/article/details/52150561
CSS实现文字旋转/实现角标的更多相关文章
- css让文字旋转270度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- css实现角标
效果图: 简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以, <div class='checked-item'> 角标实现 < ...
- 通知角标(2)只用一个TextView实现
可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...
- bootstrap4 Reboot details summary 美化(点选禁止选中文本,单行隐藏角标,多行后移)
bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML <details> & ...
- HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- 设置tabbar的角标与第三方库Masonry的基本使用
// 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...
- MIUI6&7桌面角标开源代码简介
MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...
- css控制文字长度,超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
随机推荐
- 时光轴一之listView实现时光轴效果
尼玛.非要搞什么时光轴,一想简单的不就是个listView吗,然后一步一步来就好了,哈哈别看那么好看事实上不要想多了. 时光轴timeline最大的作用就是把过去的事物系统化.完整化.精确化.时间轴可 ...
- C++ HOJ 火车进站
[问题描写叙述] 给定一个正整数N代表火车数量.0<N<10,接下来输入火车入站的序列,一共N辆火车,每辆火车以数字1-9编号. 要求以字典序排序输出火车出站的序列号. 输入: 有多组 ...
- Centos7.2——自定义系统服务
前言 顾明思议,自己创建系统服务,在上一篇博文中写道了,这里就详细写下~ 步骤 我是一段美丽的用户分割的废话~ 进入到系统服务目录 ··· cd /lib/systemd/system ··· 创建服 ...
- FileReader、 FileWriter、readLine()和newLine()、LineNumberReader(二十一)
1.字符流FileReader * 1.字符流是什么 * 字符流是可以直接读写字符的IO流 * 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写出. ...
- CSS:清除浮动
周五去听css样式的培训,讲到float导致div不能被撑开的问题,特记录如下: 在写HTML代码的时候,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部 ...
- Redis和StackExchange.Redis
redis有多个数据库1.redis 中的每一个数据库,都由一个 redisDb 的结构存储.其中,redisDb.id 存储着 redis 数据库以整数表示的号码.redisDb.dict 存储着该 ...
- POJ2142:The Balance (欧几里得+不等式)
Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of medicine. F ...
- Linux Bash 提示符的一些骚年操作
当你在 Linux 环境下打开一个 Shell 终端时,会看到命令行中出现了类似下面的一个 Bash 提示符: 百牛信息技术bainiu.ltd整理发布于博客园[user@$host ~]$1[use ...
- absolute 和float
position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠 ...
- 012--python字符编码和list列表和循环语句
一.字符编码: ASCII码最多只能表示 256个符号,每一个字符占8位 为什么一个字节占8位?因为计算机在读一串二进制数111011001111101110的时候, 要按照规定的长度截取,才能分清一 ...