主要用到属性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. 通达OA二次开发 工作流表单中关联查询另外一个工作流方法(源代码)

    一个工作流表单中,怎样方便的查询相关的工作流表单内容.重复打开各个菜单必定须要造成多次点击浪费时间,切换也会带来思路的中断.这里通过js代码的方式把这个问题进行了解决. <style>&l ...

  2. (30)java web的hibernate使用-c3p0连接池配置

    hibernate支持c3p0连接池 需要导入c3p0的jar包 <!-- 配置连接驱动管理类 --> <property name="hibernate.connecti ...

  3. IE67下float左右对齐

    例子: <style> .h1{text-align: left;} .leftA{color: #000} .rightA{color: #ccc; float: right;} < ...

  4. sed替换变量

    今天在写脚本时用到了sed,我用sed替换xml文件中的变量.一般在sed 中替换都用单引号,如下边 sed -i ‘s/10/1000/g’ test.xml但是如果需要把1000改成变量,如sed ...

  5. sublime text3的安装使用

    1.下载网址:https://www.sublimetext.com/3 2.编译环境配置:https://jingyan.baidu.com/article/6f2f55a155a7d1b5b93e ...

  6. Oracle:ORA-00214

    现场数据库服务器突然断电,启动时,提示如下现象: sql>sqlplus / as sysdba sql>startup ORA-00214: controlfile 'E:\oracle ...

  7. poj-1273 Drainage Ditches(最大流基础题)

    题目链接: Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 67475   Accepted ...

  8. socket入门教程

    Server.cs   服务端程序 using System; using System.Collections.Generic; using System.ComponentModel; using ...

  9. 网络爬虫之requests模块的使用+Github自动登入认证

    本篇博客将带领大家梳理爬虫中的requests模块,并结合Github的自动登入验证具体讲解requests模块的参数. 一.引入:   我们先来看如下的例子,初步体验下requests模块的使用: ...

  10. “玲珑杯”线上赛 Round #17 河南专场 A: Sin your life(和化积公式)

    传送门 题意 略 分析 首先将sin(x)+sin(y)+sin(z)h转化成\(2*sin(\frac{x+y}2)*cos(\frac{x-y}2)+sin(z)\),而cos(z)=cos(-z ...