主要用到属性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. yum lock

    状态 :睡眠中,进程ID:18439Another app is currently holding the yum lock; waiting for it to exit... 另一个应用程序是: ...

  2. 小程序多级下拉菜单demo

    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211

  3. 数字和为sum的方法数(动态规划)

    题目描述 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数.当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描述: 输入为两行: 第一行为 ...

  4. linux命令启动服务(tomcat服务或者jar包)

    启动tomcat: 1.方式一:直接启动 ./startup.sh 2.方式二:nohup ./startup.sh & 启动后,关闭当前客户端连接,重新启动一个查看是 否已经启动 启动jar ...

  5. [arm驱动]Linux内核开发之阻塞非阻塞IO----轮询操作【转】

    本文转载自:http://7071976.blog.51cto.com/7061976/1392082 <[arm驱动]Linux内核开发之阻塞非阻塞IO----轮询操作>涉及内核驱动函数 ...

  6. hihocoder hiho一下 第二十六周 最小生成树一·(Prim算法)

    题目1 : 最小生成树一·Prim算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 最近,小Hi很喜欢玩的一款游戏模拟城市开放出了新Mod,在这个Mod中,玩家可以拥 ...

  7. poj 1258 Agri-Net 解题报告

    题目链接:http://poj.org/problem?id=1258 题目意思:给出 n 个 farm,每个farm 之间通过一定数量的fiber 相连,问使得所有farm 直接或间接连通的 最少 ...

  8. hdu 1027 Ignatius and the Princess II(产生第m大的排列,next_permutation函数)

    题意:产生第m大的排列 思路:使用 next_permutation函数(头文件algorithm) #include<iostream> #include<stdio.h> ...

  9. 隐马尔科夫模型HMM

    崔晓源 翻译 我们通常都习惯寻找一个事物在一段时间里的变化规律.在很多领域我们都希望找到这个规律,比如计算机中的指令顺序,句子中的词顺序和语音中的词顺序等等.一个最适用的例子就是天气的预测. 首先,本 ...

  10. [Selenium] WebDriver 操作文件系统

    1)屏幕截图 接口函数是 TakesScreenshot 示例: import java.io.File; import org.apache.commons.io.FileUtils; public ...