纯CSS实现带箭头气泡的标签效果

首页 / 图解小知识 | 2022-08-19 00:02:54 点击:0

带上下左右箭头的标签效果:

纯css实现带箭头的标签效果
纯css实现带箭头的标签效果

相关的CSS代码:

  1.  
  2.     .label{position:relative; display:inline-block; background:#0a9; font-size:12px; margin-right:10px} 
  3.     .label a{color:#fff; display:inline-block; padding:3px 6px; text-decoration:none} 
  4.     .label-arrow{position:absolute; border:4px solid rgba(0,0,0,0); height:0; line-height:0; font-size:0} 
  5.     .label-arrow-l{top:6px; left:-8px; border-right-color:#0a9} 
  6.     .label-arrow-r{top:6px; right:-8px; border-left-color:#0a9} 
  7.     .label-arrow-t{top:-8px; left:50%; margin-left:-4px; border-bottom-color:#0a9} 
  8.     .label-arrow-b{bottom:-8px; left:50%; margin-left:-4px; border-top-color:#0a9} 
  9.  

相关的HTML代码:

  1.  
  2.     前端开发 
  3.      
  4.  
  5.  
  6.     HTML+CSS 
  7.      
  8.  
  9.  
  10.     网站运维 
  11.      
  12.  
  13.  
  14.     织梦CMS 
  15.      
  16.  

整个粘贴到页面任何地方都可以呈现带箭头的标签效果。

RGBA颜色:

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 Alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值:rgba(Red, Green, Blue, Alpha)。Alpha 参数是介于 0.0(完全透明)至 1.0(完全不透明)的数字。

css的border属性

  1.  
  1. .border{ 
  2.     float:left; 
  3.     border-width:100px; 
  4.     border-style:solid; 
  5.     border-left-color:red; 
  6.     border-right-color:blue; 
  7.     border-top-color:green; 
  8.     border-bottom-color:#666 
  9. }  

以上样式的border效果:

css的border效果
css的border效果

从上图可以看出border的上、右、下、左可以模拟出三角形效果,这就是前面带箭头标签里的箭头。

---------------补充 20160428---------------

第二种方法:

前几天看到百度前端工程师用了另外一种方法实现箭头效果,分享给前端爱好者们。

HTML结构:

  1.  
  2.     ◆ 
  3.     ◆ 
  4.     78 
  5.  
  6. 讨论任何WEB技术问题!让我们一起“益享天开”

     

CSS关键代码:

  1. .item-num-wrap { 
  2.     float: left; 
  3.     margin-right: 10px; 
  4.     width: 36px; 
  5.     height: 19px; 
  6.     line-height: 19px; 
  7.     text-align: center; 
  8.     border: 1px solid #dcdcdc; 
  9.     background: #fff; 
  10.     position: relative; 
  11. .arrow-outer, .arrow-inner { 
  12.     position: absolute; 
  13.     /*在一个声明中设置所有字体属性 Unicode编码b8bf53表示宋体*/ 
  14.     font: 400 12px/19px simsun b8bf53; 
  15.     width: 12px; 
  16.     overflow: hidden; 
  17. .arrow-outer { 
  18.     color: #dcdcdc; 
  19.     top: 1px; 
  20.     right: -7px; 
  21. .arrow-inner { 
  22.     color: #fff; 
  23.     top: 1px; 
  24.     right: -6px; 
  25. .item-num{ 
  26.     color:#999; 

效果:

气泡效果

说明:这其实利用两个方块♦,通过绝对定位,巧妙地设置color颜色而实现的效果。

注意:方块的字体即font-family属性值要设置正确,此处用了宋体即simsun 或 Unicode编码b8bf53


  

如果对前端有兴趣,欢迎加入前端技术QQ群:239274519(不止前端技术)


本站声明:本站部分文章来自网络,由用户上传分享,如若内容侵犯了您的合法权益,可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

评论(0)
*评论只允许汉字和全角中文标点符号。 ? ! ,等
相关标签

推荐相关
相关图片
图集标签

标签索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

文章索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

关注用户
QQ皮肤 | 唯美图片 | 闪图 | 女生头像 | 女生图片 | 文字图片 | 爱情图片 | 素材图片 | 非主流图片 | 伤感图片 | 游戏图片 | QQ表情 | 流光字 | qq相册封面拼图 | 小清新图片 | lomo图片 | 美女 | 搞笑图片 | 美文 | 卡通图片 | 原创投稿 | 植物图片 | 动物图片 | 风景图片 | 二次元 | 古风图片 | 美食图片 | 手工制作 | 动漫图片 | 手工折纸 | 废物利用 | 儿童手工 | 可爱图片 | 插画 | 欧美图片 | 头像 | 男生头像 | 情侣头像 | 欧美头像 | 卡通头像 | qq说说 | 伤感说说 | 爱情说说 | 搞笑说说 | 心情说说 | 经典说说 | 图片说说 | 纹身图案 | 可爱头像 | 娱乐圈 | 明星图片 | 娱乐八卦 | 影视剧照 | 摄影图片 | 儿童图片 | 女孩图片 | 男孩图片 | 宝宝图片 | cosplay图片 | 图解小知识 | 美女写真 | 性感美女 | 美女校花 | 游戏美女 | 韩国美女 | 清纯美女 | 内衣美女 | 制服美女 | **** | 欧美美女 | 美女模特 | 美女私房 | 电脑壁纸 | 影视壁纸 | 明星壁纸 | 美女壁纸 | 节日壁纸 | 游戏壁纸 | 卡通动漫 | 美食壁纸 | 风景壁纸 | 动物壁纸 | 设计创意 | 汽车壁纸 | 日历壁纸 | 植物壁纸 | 广告壁纸 | 家居壁纸 | 军事壁纸 | 体育壁纸 | 风格壁纸 | 手机壁纸 | 动漫 | 美女 | 明星 | 游戏 | 影视 | 汽车 | 风景 | 唯美 | 植物 | 动物 | 可爱 | 节日 | 卡通 | 创意 | 非主流 | 苹果 | 搞笑 | 爱情 | 动态 | 风格 | 体育 | 美食 | 萌表情 | 文案 范文 曲谱大全 | 美声曲谱 | 合唱曲谱 | 少儿曲谱 | 外国曲谱 | 戏曲曲谱 | 民歌曲谱 | 通俗曲谱 | 器乐乐谱 | 原创曲谱 | 谱友园地 | 个人曲谱 | 吉他乐谱 | 电子琴谱 | 钢琴乐谱 | 胡琴乐谱 | 葫芦丝等 | 琵琶乐谱 | 其他乐谱 | 笛箫乐谱 | 古筝古琴 | 铜管乐谱 | 提琴乐谱 | 长笛乐谱 | 手风琴谱 | 萨克斯谱 | 口琴乐谱 | 扬琴乐谱 | 图说养生 | 运动养生 | 春季养生 | 女性健康 | 夏季养生 | 疾病预防 | 秋季养生 | 养生小妙招 | 减肥瘦身 | 冬季养生 | 母婴保健 | 24节气养生 | 生活常识 | 孕妇养生 | 小偏方 | 幼儿养生 | 美容护肤 | 老人养生 | 中医养生 | 饮食指南 | 青少年养生 | 饮食指南 | 女性养生 | 男性养生 | 白领养生 | 男性健康 | 两性保健 | 生活禁忌 | 穴位养生 | 两性健康 | 风景头像 | 心理健康 | 养生资讯 | 评测 | 图说花草 | 养花知识 | 花卉诊疗 | 植物百科 | 图说娱乐 | 明星 | 影视 | 综艺 | 八卦 | 爆料 | 花边 | 趣事 | 日韩 | 剧情 | 图说女性 | 时尚美妆 | 整容知识 | 丰胸** | 美体知识 | 时尚穿搭 | 化妆技巧 | 发型设计 | 护肤知识 | 美**选 | 保养技巧 | 时尚包包 | 女士内衣 | 运动健身 | 图说社会 | 旅游 | 百态 | 创业 | 职场 | 军事 | 情感 | 健康 | 美食 | 问答 | 图说知识 | 生活 | 资讯 | 影视 | 女性 | 旅游 | 汽车 | 吃喝 | 科技 | 教学 | 食谱 | 特产 | 功效与作用 | 美食 | | 烘焙 | 手机数码 | win7 | word | Excel | 电脑操作 | Photoshop | win10 | PowerPoint | 数码 | 教育 | 手抄报 | 简笔画 | 简笔画大全 | 故事 | 折纸 | 节日节气 | 历史 | 优品 | 家居知识 | 家居 | 母婴 | 星座 | 街拍 | 图说排名 | 生活 | 旅游 | 娱乐 | 城市 | ** | 教育 | 科技 | 行业 | 军事 | 人物 | 体育 | 图说亲子 | 备孕 | 孕期 | 分娩 | 产后 | 新生儿 | 幼儿 | 婴儿 | 早教 | 儿童 | 用品 | 图说发型 | 女生 | 波波头 | 丸子头 | 花苞头 | 男生 | 编发 | 长发 | 圆脸 | 大脸 | 马尾辫 | 蜈蚣辫 | 麻花辫 | 梨花头 | 盘发 | 卷发 | 直发 | 短发 | 刘海 | 非主流 | 夏季 | 发髻 | 纹理烫 | 荷叶头 | 韩式 | 胖脸 | 娃娃脸 | 瓜子脸 | 长脸 | 方脸 | 欧美头像 | 个性头像 | 唯美头像 | 文字头像 | 带字头像 | 伤感头像 | 黑白头像 | 霸气头像 | 超拽头像 | 颓废头像 | 清新头像 | 意境头像 | 背影头像 | 抽烟头像 | 搞笑头像 | 小孩头像 | 游戏头像 | 动物头像 | 汽车头像 | 超萌头像 | 创意头像 | 静物头像 | 非主流头 | 星座头像 | 植物头像 | 节日头像 | 另类头像 | 手绘头像 | 纹身头像 | 明星头像 | 人物头像 | 建筑头像 | 恐怖头像 | 古风头像 | 励志头像 | 风水头像 | 姓氏头像 | 动态头像 | 群头像 | 家用电器 | 手机数码 | 护肤美妆 | 服装饰品 | 食品特产 | 母婴用品 | 时尚生活 | 探索发现 | 科学探寻 | 未解之谜 | 世界之最 | 历史趣闻 | 宇宙探索 | 猎奇八卦 | 世界十大 | 奇异生物 | 图说理财