主要用到属性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. 端口扫描 开启 防火墙 iptables SELinux

    Linux 如何打开端口 - lclc - 博客园 https://www.cnblogs.com/lcword/p/5869522.html linux如何查看端口相关信息_百度经验 https:/ ...

  2. 单字节的FIFO缓存(30天自制操作系统--读书笔记)

    从今天起,写一些读书笔记.最近几个月都在看<30天自制操作系统这本书>,书虽说看的是电子书,但可以花钱买的正版书,既然花费了金钱,就总得有些收获. 任何人都不能总是固步自封,想要进步就得学 ...

  3. mysql优化-----索引覆盖

    一道面试题: 有商品表, 有主键,goods_id, 栏目列 cat_id, 价格price 说:在价格列上已经加了索引,但按价格查询还是很慢,问可能是什么原因,怎么解决? 答:在实际场景中,一个电商 ...

  4. Spring Boot2.0之 整合Redis集群

    项目目录结构: pom: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...

  5. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  6. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  7. Javascript中两种最通用的定义类的方法

    在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定 ...

  8. receive和process的过程

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

  9. 使用SVPullToRefresh实现下拉刷新和下拉加载

    移动端开发中,“下拉刷新”和“上拉加载更多”早已在各大App中随处可见.也非常容易就能找到直接可供使用的第三方资源.譬如EGOTableViewPullRefresh(下拉刷新)和LoadMoreTa ...

  10. nginx开发_配置项

    nginx开发笔记_配置项 模块的配置项即nginx.conf中的指令,HTTP模块指令可以分为三个级别: main级,直接写在http{}块中的指令 server级,写在server{}块中的指令 ...