主要用到属性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. linux 设备驱动程序中的一些关联性思考

    首先,个人感觉设备驱动程序与应用程序中的文件操作隔得有点远,用户空间不论是直接使用系统调用还是库函数都是通过系统调用的接口进入内核空间代码的.但是看过一个博客的分析整个过程,感觉中间层太过麻烦,必须经 ...

  2. YTU 2878: 结构体--学生信息排序

    2878: 结构体--学生信息排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 297  解决: 148 题目描述 定义存放一个学生信息的结构体类型,学生信息包括:姓名,学号,性别,院 ...

  3. jsp重写url

    众所周知,使用java web编程出来的网站都是.jsp结尾的,而别人的网站都是以.html结尾的,那么这种效果是怎么实现的呢?就是这篇文章产生的原因,jsp重写url需要设计到第三方架包urlrew ...

  4. receive和process的过程

    (一) receive最终在fuse_kern_chan.c中的fuse_kern_chan_receive函数实现,使用系统调用读取 res = read(fuse_chan_fd(ch), buf ...

  5. 出现Insufficient space for shared memory file错误解决

    今天在linux下敲命令,出现上面的错误,原来是临时文件目录(/tmp)下的空间不够了,df一看/下100%了.

  6. 虚拟机bridged, NAT and host-only网络区别

    In Linux, a network of each type is created when running vmware-config.pl. In Windows, they are auto ...

  7. 【转】java对象——new对象的理解

    学了好长时间的java对于java中的对象一直没有理清楚,今天楼主对java中的对象进行了整理,希望对大家有帮助. 理解和使用java中的对象,我们首先了解一下构造方法与对象的创建.  类是面向对象语 ...

  8. Harbor安装部署--基于 Docker Distribution 的企业级 Registry 服务

    harbor简介 Harbor 是一个企业级 Registry 服务.它对开源的 Docker Registry 服务进行了扩展,添加了更多企业用户需要的功能.Harbor 被设计用于部署一套组织内部 ...

  9. 纯拓扑排序一搞poj2367

    /* author: keyboarder time : 2016-05-18 12:21:26 */ #include<cstdio> #include<string.h> ...

  10. MongoDb Samus c# Find函数的使用说明

    长活短说, 网上有一些是不对的 比如 Op.GreaterThan(...).LessThan(..) 不能这么用来表示 ( , ) 而应该这么用: var doc = new Document( a ...