首页 > 其他分享 >给容器右上角打标,带图标

给容器右上角打标,带图标

时间:2024-06-05 18:12:29浏览次数:32  
标签:right 右上角 打标 solid active 20px font border 图标

假设容器的active类名为is-active,那么可以通过伪元素的方式来给容器打标。效果如下:

 

样式如下:

.is-active{
position: relative;
}
.is-active::after {
content:"";
position: absolute;
right: 0;
top: 0;
border-right: 20px solid #0A53C8;
border-top: 20px solid #0A53C8;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
width: 0;
height: 0;
}
.is-active::before {
content: "\e6da";
font-family: element-icons !important;
color: #fff;
font-size: 20px;
font-weight: bold;
position: absolute;
right: 0px;
top: 0px;
z-index: 9;
}

标签:right,右上角,打标,solid,active,20px,font,border,图标
From: https://www.cnblogs.com/YiFeng-Liu/p/18233523

相关文章

  • 修改桌面图标
    文章目录1.概念介绍2.使用方法3.示例代码4.经验与总结4.1经验分享4.2内容总结我们在上一章回中介绍了"overlay_tooltip简介"相关的内容,本章回中将再谈flutter_launcher_icons包.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在四百一十二回中介绍修......
  • 制作launch图标
    文章目录1.概念介绍2.使用方法3.示例代码4.经验与总结4.1经验分享4.2内容总结我们在上一章回中介绍了"overlay_tooltip简介"相关的内容,本章回中将再谈flutter_launcher_icons包.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在四百一十二回中介绍修......
  • BootStrap入门到实战:BootStrap组件(一)- Glyphicons字体图标、下拉菜单、按钮组、按钮式
    目录 一、Glyphicons字体图标二、下拉菜单1.基本实例1.1示例1.2用jQuery实现1.3菜单向上弹出2.对齐3.标题4.分割线5.禁用的菜单项三、按钮组1.基本实例2.按钮工具栏3.尺寸4.嵌套5.垂直排列6.两端对齐排列的按钮组四、按钮式下拉菜单1.单按......
  • wpf 中阿里图标库的使用
    阿里图标库的使用阿里图标库iconfont1.进入阿里图标库主界面后,根据需要搜索自己要用的图标,然后加入到购物车中2.打开“资源管理-我的项目”,进入我的项目界面,然后点击"下载至本地",把资源文件下载到本地3.引用资源(通过编码"&#xefdc"和ttf字体文件实现效果)效果......
  • Ubuntu图形界面下无设置图标且无法打开设置的解决办法
    如有不足之处,还请指正。1.确认网络连接正常网络测试方法:1.pingbaidu.com```pingbaidu.com```2.直接打开浏览器尝试能否搜索如果网络已经处于有线连接状态,可以ping通,但浏览器无法进行联网搜索这时只能通过重启1到3次来尝试连接到互联网2.安装gnome-control-center......
  • html制作悬浮图标可以拖拽
    如上图所示,制作一个悬浮图标,可以点击,可以拖拽到其他地方,兼容电脑手平板等。<divstyle="display:inline;z-index:20"@click="showMessage"v-if="rightFlags.shareRight"><img:src="require('@/assets/monitor/send.png')"style=&qu......
  • 学习unigui【25】关于图标
    网上有不少介绍。自己的经验:是否需要下载文件fontawesome-free-6.5.1-web(),没有研究。说ext_js已经下载配套了。我很懒,得过且过。1、下载fontawesome-free-6.5.1-web放在resource,一般推荐files。2、在ServerModule的costomfiles:.\resource\fontawesome-free-6.5.1-web\css\all......
  • ImGui设置程序图标
    环境:Win10,OpenGL+GLFW首先需包含stb_image.h头文件#defineSTB_IMAGE_IMPLEMENTATION#include"stb_image.h"然后添加代码://CreatewindowwithgraphicscontextGLFWwindow*window=glfwCreateWindow(1280,720,title,NULL,NULL);if(window==NULL......
  • css实现按钮文案垂直水平居中,按钮左侧图标相对文字固定距离展示
    需求css实现按钮文案垂直水平居中,按钮左侧图标相对文字固定距离展示,效果如图: 实现方案一:使用margin-right来实现按钮和左侧图标的间距<divclass="download-btn"><divclass="btn-content":class="{'left-icon':showLeftIcon}"><div......
  • Windows 11系统设置显示桌面图标方法分享
        随着Windows11操作系统的正式发布,许多用户纷纷升级,以体验其新颖的界面和改进的功能。然而,面对全新的用户界面和设置选项,即使是经验丰富的Windows用户也可能会遇到一些挑战。其中一个常见的问题就是如何在Windows11中设置显示桌面图标,这对于习惯了在桌面上组织文......