主要用到属性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实现文字旋转/实现角标的更多相关文章

  1. css让文字旋转270度

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  2. css实现角标

    效果图: 简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以, <div class='checked-item'>    角标实现 < ...

  3. 通知角标(2)只用一个TextView实现

    可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...

  4. bootstrap4 Reboot details summary 美化(点选禁止选中文本,单行隐藏角标,多行后移)

    bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML <details> & ...

  5. HTML页面仿iphone数字角标

    做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...

  6. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  7. 设置tabbar的角标与第三方库Masonry的基本使用

    // 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...

  8. MIUI6&7桌面角标开源代码简介

    MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...

  9. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

随机推荐

  1. <转载>调制与解调电路详解

    原文链接:http://www.elecfans.com/analog/20120509270848_4.html 调幅和检波电路 广播和无线电通信是利用调制技术把低频声音信号加到高频信号上发射出去的 ...

  2. iOS 如何改变表视图分割线在iOS7中的默认偏移

    - (void)viewDidLoad { [super viewDidLoad]; self.automaticallyAdjustsScrollViewInsets = NO; if ([self ...

  3. MVVM模式介绍

    MVVM:模型-视图-视图模型(Model-View-ViewModel)   组成部分Model.View.ViewModel View:UI界面 ViewModel:它是View的抽象,负责Vie ...

  4. Oracle:datafile删除后,重启server报ORA-01110

    模拟实验: 创建一个表空间后,直接把数据文件删除了:然后重启server. 1. create tablespace w56 datafile '/u01/app/oracle/product/10. ...

  5. lock的两种方式

    假设现在我们有100个数据项可以读写.有若干个线程,任何一个线程可能对任何一个数据项尽心读写. 但是,如果不同的线程在对同一个数据项进行读写,就可能发生错误.需要使用lock进行控制. 比如线程x要对 ...

  6. springboot web项目搭建

    1.选择spring initializr 2.填写应用名称及设置相关配置,建议使用默认配置即可 3.选择相关技术,我们现在web技术 4.填写项目名称 5.项目文件结构如下 6.直接运行 java ...

  7. Windows Mysql启动出现1069错误 “由于登录失败而无法启动服务” 的处理方法

    问题现象 windows下mysql服务无法启动,报1069错误. 问题原因 如果Mysql启动用户的密码或者权限错误,会导致Windows服务器Mysql启动时出现"由于登录失败而无法启动 ...

  8. CoderForces343D:Water Tree(dfs序+线段树&&特殊处理)

    Mad scientist Mike has constructed a rooted tree, which consists of n vertices. Each vertex is a res ...

  9. [Selenium] 如何使ChromeDriver 每次启动的端口不会随机变化

    ChromeDriver  在不指定任何参数的情况下,启动监听端口会随机变化.如果需要保证其端口固定不变,可通过ChromeDriverService 打的目的 public class testCh ...

  10. iOS 深拷贝、浅拷贝、自定义对象拷贝简介

    copy语法的目的:改变副本的时候,不会影响到源对象: 深拷贝:内容拷贝,会产生新的对象.新对象计数器置为1,源对象计数器不变. 浅拷贝:指针拷贝,不会产生新的对象.源对象计数器+1. 拷贝有下面两个 ...