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: ...
随机推荐
- 使用Android Studio查看API文档
在使用Android Studio编码时,若要查看某个类或函数的释义, 只需将光标移动至要查看释义的代码处,然后按下Ctrl+Q,便会弹出文档描述. 然而,有时候会出现如下状况: 因为默认查看的是在线 ...
- 用Qt编写的计算文件MD5值的Demo
Dialog.ui <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0& ...
- bzoj3727: PA2014 Final Zadanie
我真是SB之神呢这么SB的题都不会 肯定是先无脑正向思考,罗列下关系式: b[1]=∑a[i]*dep[i]=∑tot[i] (i!=1) b[i]=b[fa]-tot[i]+(tot[1]-tot[ ...
- POJ1860 Currency Exchange —— spfa求正环
题目链接:http://poj.org/problem?id=1860 Currency Exchange Time Limit: 1000MS Memory Limit: 30000K Tota ...
- Centos6.8更好yum源
第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...
- Getting Started with xUnit.net (desktop)
https://xunit.github.io/docs/getting-started-desktop.html In this article, we will demonstrate getti ...
- hdu 1548 A strange lift 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1548 题目意思:给出 n 个 floor 你,每个floor 有一个数k,按下它可以到达 floor ...
- 广大暑假训练1(poj 2488) A Knight's Journey 解题报告
题目链接:http://vjudge.net/contest/view.action?cid=51369#problem/A (A - Children of the Candy Corn) ht ...
- maven实战(7)-- 设置maven编译器级别
两种方式: (一)全局设置 首先我们要在settings.xml文件中找到<profiles>标签,然后在此标签内部粘贴如下配置: <profile> <id>jd ...
- 机器学习 Hidden Markov Models 3
Viterbi Algorithm 前面我们提到过,HMM的第二类问题是利用HMM模型和可观察序列寻找最有可能生成该观察序列的隐藏变量的序列.简单来说,第一类问题是通过模型计算生成观察序列的概率,而第 ...