css角标
HTML:
<div class='card-wrap'>
<div class='news1'>
<div class='ribbon'>
<div class='ribbon1'>热点</div>
</div>
</div>
</div>
CSS:
.card-wrap {
text-align: center;
}
.news1 {
width: 400px;
height: 500px;
position: relative;
background: skyblue;
overflow: visible;
margin: 20px;
display: inline-block;
}
.ribbon {
width: 106px;
height: 108px;
overflow: hidden;
position: absolute;
top: -6px;
left: -6px;
}
.ribbon1 {
line-height: 18px;
text-align: center;
transform: rotate(-45deg);
position: relative;
padding: 8px 0;
left: -33px;
top: 26px;
width: 150px;
background: goldenrod;
color: white;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
}
.ribbon1:before,
.ribbon1:after {
content: "";
border-top: 4px solid #4e7c7d;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
bottom: -4px;
}
.ribbon1:before {
left: 0;
}
.ribbon1:after {
right: 0;
}
css角标的更多相关文章
- css实现角标
效果图: 简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以, <div class='checked-item'> 角标实现 < ...
- 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 ...
随机推荐
- Linux基本原则
Bash特性 Shell shell(外壳),广义的shell可以理解为是用户的工作环境,在windows看来桌面就是一个shell,在linux看来终端就是shell 常见的shell有两种,一种是 ...
- Cisco Catalyst 9800-CL Wireless Controller for Cloud
面向云的思科 Catalyst 9800-CL 无线控制器,专为基于意图的网络全新打造. 版本: C9800-CL-universalk9.17.04.01 (29-Nov-2020) C9800-C ...
- 对标 Spring Boot & Cloud ,轻量框架 Solon 1.4.12 发布
Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...
- NVIDIA Turing Architecture架构设计(下)
NVIDIA Turing Architecture架构设计(下) GDDR6 内存子系统 随着显示分辨率不断提高,着色器功能和渲染技术变得更加复杂,内存带宽和大小在 GPU 性能中扮演着更大的角色. ...
- 《精通 ASP.NET Core MVC (第七版)》开始发售
学习 Web 开发技术很难吗?没有适合的学习资料,确实很枯燥,很难.如果有一本如同良师益友的优秀图书辅助,就很轻松,一点也不难! 对于优秀的技术图书来说,必须从读者的角度来编写,而不是从作者的角度来编 ...
- mybatis学习——类型别名(typeAliases)
为什么要用类型别名? 答:类型别名可为 Java 类型设置一个缩写名字. 它仅用于 XML 配置,意在降低冗余的全限定类名书写. 举个例子说明: 在我们编写映射文件的时候: <?xml vers ...
- JVM 垃圾回收算法和垃圾回收器
JVM 垃圾回收算法和垃圾回收器. 一.垃圾回收的区域 栈:栈中的生命周期是跟随线程,所以一般不需要关注. 堆:堆中的对象是垃圾回收的重点. 方法区:这一块也会发生垃圾回收,不过这块的效率比较低,一般 ...
- java并发编程工具类JUC第八篇:ConcurrentHashMap
在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue.LinkedBlockingQueue.Priorit ...
- Task03:复杂一点的查询
之前接触了sql基本的查询用法,接下来介绍一些相对复杂的用法. 3.1 视图 我们先来看一个查询语句 SELECT stu_name FROM view_students_info; 单从表面上看起来 ...
- 【NX二次开发】Block UI 字符串
属性说明: BlockID String 控件ID Enable Logical 是否可操作 Group Logical 是否分组 Label ...