主要用到属性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. centos 网络连接查看

    安装iftop. 这个得先安装epel #yum install epel-replease -y #yum install iftop -y #iftop

  2. MYSQL进阶学习笔记十:MySQL慢查询!(视频序号:进阶_23-24)

    知识点十一:MySQL 慢查询的应用(23) 一.慢查询定义 MySQL记录下查询超过指定时间的语句,我们将超过指定时间的SQL语句查询称为慢查询. 查看时间限制 show variables lik ...

  3. jstl标签: c:Foreach详解

    为循环控制,它可以将集合(Collection)中的成员循序浏览一遍.运作方式为当条件符合时,就会持续重复执行的本体内容. 为循环控制,它可以将集合(Collection)中的成员循序浏览一遍.运作方 ...

  4. VS 一些配置设置

    /************************************************************************ * VS 一些配置设置 * 说明: * 最近要用到C ...

  5. unittest参数化parameterized

    参考文章: https://www.cnblogs.com/royfans/p/7226360.html https://blog.csdn.net/zha6476003/article/detail ...

  6. Code-zabbix:zabbix-3.4-快速入门

    ylbtech-Code-zabbix:zabbix-3.4-快速入门 1.返回顶部 1. 1 登陆和配置用户 登陆Zabbix,以及在Zabbix内建立一个系统用户. 用户名:Admin 或者 ad ...

  7. 1-1 课程导学 & 1-2 项目需求分析,技术分解.

    1-1 课程导学 1-2 项目需求分析,技术分解. 要有一定的dart基础,了解安卓和ios的一些普通的开发

  8. 关于 android 中 postDelayed方法的讲解 (转载)

    转自:http://blog.csdn.net/xiabo851205/article/details/7991529 这是一种可以创建多线程消息的函数 使用方法: 1,首先创建一个Handler对象 ...

  9. poj 1182 食物链【带权并查集】

    设相等的边权为0,吃的边权为,被吃的边权为2,然后用带权并查集在%3的意义下做加法即可 关系为简单环的基本都可以用模环长的方式是用带权并查集 #include<iostream> #inc ...

  10. IT兄弟连 JavaWeb教程 Servlet中定义的变量的作用域类型

    在Java语言中,局部变量和实力变量有着不同的作用于,它们的区别如下: 局部变量在一个方法中定义,每当一个线程执行局部变量所在的方法时,在线程的堆栈中就会创建这个局部变量,当线程执行完该方法,局部变量 ...