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: ...
随机推荐
- codeforces C. Magic Formulas 解题报告
题目链接:http://codeforces.com/problemset/problem/424/C 题目意思:给出 n 个数:p1, p2, ..., pn,定义: q1 = p1 ^ (1 mo ...
- java的数字精确计算问题-BigDecimal
java的数字运算,偶尔会出现精度的问题,以下阐述的 java的BigDecimal类的使用. 例如: System.out.println(0.9+0.3); 结果1.2 System.out.pr ...
- LA-3029(扫描线)
题意: 给定一个n*m的矩阵,一些格子是空地“F”,一些是障碍"R",找出一个全部由F组成的面积最大的子矩阵; 思路: 对每个格子维护up[i][j],le[i][j],ri[i] ...
- I.MX6 新版u-boot分析
/******************************************************************* * I.MX6 新版u-boot分析 * 说明: * 因为一些 ...
- 【CQ18阶梯赛第8场】题解
[A:HDU2032 杨辉三角]: 简单的递推,或者是基础的DP: 但是只有杨润东一个人1A,整体准确率只有8/37,具体原因不详. 经验:提交前一定要试一下比较特殊的数据或者最大的数据.其次,为了保 ...
- ASP.NET Core:template
ylbtech-ASP.NET Core: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://yl ...
- vue 使用font-awesome 只需两步
npm 安装font-awesome 以及需要的所有依赖 cnpm install less less-loader css-loader style-loader file-loader font- ...
- 【旧文章搬运】遍历EPROCESS中的ActiveProcessLinks枚举进程
原文发表于百度空间,2008-7-25========================================================================== 前面对PEB ...
- mfc设置半透明对话框
BOOL CDialog7::OnInitDialog() { CDialog::OnInitDialog(); // TODO: 在此添加额外的初始化 ::SetWindowLong(GetSafe ...
- 父窗口与iFrame之间调用方法和元素
父窗口与iFrame之间调用方法和元素 父窗口调用子窗口: 调用元素 js格式: var obj=document.getElementById("iframe的name").co ...