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角标的更多相关文章

  1. css实现角标

    效果图: 简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以, <div class='checked-item'>    角标实现 < ...

  2. CSS实现文字旋转/实现角标

    主要用到属性transform:rotate(-30deg) example: .divedittable .project-tag div { width: 43px; line-height: 4 ...

  3. bootstrap4 Reboot details summary 美化(点选禁止选中文本,单行隐藏角标,多行后移)

    bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML <details> & ...

  4. HTML页面仿iphone数字角标

    做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...

  5. 通知角标(2)只用一个TextView实现

    可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...

  6. 设置tabbar的角标与第三方库Masonry的基本使用

    // 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...

  7. MIUI6&7桌面角标开源代码简介

    MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...

  8. Android 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  9. ANDROID SHAPE画圆形背景_ANDROID实现角标布局

    ANDROID SHAPE画圆形背景_ANDROID实现角标布局 <?xml version="1.0" encoding="UTF-8"?> &l ...

随机推荐

  1. Linux基本原则

    Bash特性 Shell shell(外壳),广义的shell可以理解为是用户的工作环境,在windows看来桌面就是一个shell,在linux看来终端就是shell 常见的shell有两种,一种是 ...

  2. Cisco Catalyst 9800-CL Wireless Controller for Cloud

    面向云的思科 Catalyst 9800-CL 无线控制器,专为基于意图的网络全新打造. 版本: C9800-CL-universalk9.17.04.01 (29-Nov-2020) C9800-C ...

  3. 对标 Spring Boot & Cloud ,轻量框架 Solon 1.4.12 发布

    Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...

  4. NVIDIA Turing Architecture架构设计(下)

    NVIDIA Turing Architecture架构设计(下) GDDR6 内存子系统 随着显示分辨率不断提高,着色器功能和渲染技术变得更加复杂,内存带宽和大小在 GPU 性能中扮演着更大的角色. ...

  5. 《精通 ASP.NET Core MVC (第七版)》开始发售

    学习 Web 开发技术很难吗?没有适合的学习资料,确实很枯燥,很难.如果有一本如同良师益友的优秀图书辅助,就很轻松,一点也不难! 对于优秀的技术图书来说,必须从读者的角度来编写,而不是从作者的角度来编 ...

  6. mybatis学习——类型别名(typeAliases)

    为什么要用类型别名? 答:类型别名可为 Java 类型设置一个缩写名字. 它仅用于 XML 配置,意在降低冗余的全限定类名书写. 举个例子说明: 在我们编写映射文件的时候: <?xml vers ...

  7. JVM 垃圾回收算法和垃圾回收器

    JVM 垃圾回收算法和垃圾回收器. 一.垃圾回收的区域 栈:栈中的生命周期是跟随线程,所以一般不需要关注. 堆:堆中的对象是垃圾回收的重点. 方法区:这一块也会发生垃圾回收,不过这块的效率比较低,一般 ...

  8. java并发编程工具类JUC第八篇:ConcurrentHashMap

    在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue.LinkedBlockingQueue.Priorit ...

  9. Task03:复杂一点的查询

    之前接触了sql基本的查询用法,接下来介绍一些相对复杂的用法. 3.1 视图 我们先来看一个查询语句 SELECT stu_name FROM view_students_info; 单从表面上看起来 ...

  10. 【NX二次开发】Block UI 字符串

    属性说明:     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical 是否分组     Label  ...