css实现角标
效果图:
简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以,
<div class='checked-item'>
角标实现
<div class="replace-item">
<div class="jiao"></div>
<div class="desc">换</div>
</div>
</div>
样式
.checked-item {
position: relative;
padding : 7px 10px;
border : 1px solid #ebebeb;
text-align : center;
color : #808080;
background-color : #fff; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.replace-item {
right: 0;
top: 0;
position: absolute;
color: #ffffff;
font-size: 12px;
}
.jiao, .desc {
position: absolute;
top:0;
right: 0;
}
.jiao {
width: 20px;
height: 37px;
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);;
top: -15px;
right: -4px;
background-color: #ff685d;
padding:0;
}
.desc {
top: -2px;
}
css实现角标的更多相关文章
- CSS实现文字旋转/实现角标
主要用到属性transform:rotate(-30deg) example: .divedittable .project-tag div { width: 43px; line-height: 4 ...
- bootstrap4 Reboot details summary 美化(点选禁止选中文本,单行隐藏角标,多行后移)
bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML <details> & ...
- HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...
- 通知角标(2)只用一个TextView实现
可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...
- 设置tabbar的角标与第三方库Masonry的基本使用
// 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...
- MIUI6&7桌面角标开源代码简介
MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...
- Android 为应用添加数字角标
今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...
- ANDROID SHAPE画圆形背景_ANDROID实现角标布局
ANDROID SHAPE画圆形背景_ANDROID实现角标布局 <?xml version="1.0" encoding="UTF-8"?> &l ...
- JS和jQuery中ul li遍历获取对应的下角标
首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...
随机推荐
- 【 MAKEFILE 编程基础之四】详解MAKEFILE 函数的语法与使用!
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/771.html ...
- sas 命令行打开SAS IDE 的代码
"C:\Program Files\SASHome\SASFoundation\9.4\sas.exe" -CONFIG "C:\Program Files\SASHom ...
- Unity中进程间通信——使用异步Socket
开发Unity项目过程中,即时通信功能来完成服务器与客户端自定义的数据结构封装. 如果要序列化和数据封装参考:Unity3D之C#用Socket传数据包 蓝鸥3G封装的类 客户端脚本ClientScr ...
- delphi正则表达式学习笔记(二)
正则表达式大全 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,"n"匹配字符"n"."\n ...
- Elasticsearch增删改查
面向文档 document数据格式 应用系统的数据结构都是面向对象的,复杂的 对象数据存储到数据库中,只能拆解开来,变为扁平的多张表,每次查询的时候还得还原回对象格式,相当麻烦 ES是面向文档的,文档 ...
- hadoop/etc/hadoop 下没有mapred-site.xml,只有mapred.xml.template
默认情况下,/usr/local/hadoop/etc/hadoop/文件夹下有mapred.xml.template文件,我们要复制该文件,并命名为mapred.xml,该文件用于指定MapRedu ...
- iOS oc 检测手机移动网络和wifi是否开启
利用Reachability的的一个方法currentReachabilityStatus 获取枚举类型值判断是否为2即可,不是2就不是WiFi. enum { // DDG Netwo ...
- 《算法》第五章部分程序 part 8
▶ 书中第五章部分程序,包括在加上自己补充的代码,适用于基因序列的 2-Bit 压缩算法,行程长压缩算法,Huffman 压缩算法,LZW 压缩算法 ● 适用于基因序列的 2-Bit 压缩算法 pac ...
- Android自定义View学习笔记(一)
绘制基础 参考:HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 Paint详解 参考:HenCoder Android 开发进阶: 自定义 View 1-2 Pain ...
- 恺撒密码 I Python实现
'''恺撒密码 I描述凯撒密码是古罗马凯撒大帝用来对军事情报进行加解密的算法,它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列中该字符后面的第三个字符,即,字母表的对应关系如下:原文:A ...