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

第一种方法实际上巧妙地利用了CSS的border属性。第二种方法用了方块堆叠实现。教你利用CSS实现带箭头气泡效果的标签,分上下左右。

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

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

相关的CSS代码:

  1. <style type="text/css"
  2.     .label{position:relative; display:inline-blockbackground:#0a9font-size:12pxmargin-right:10px
  3.     .label a{color:#fffdisplay:inline-blockpadding:3px 6pxtext-decoration:none
  4.     .label-arrow{position:absoluteborder:4px solid rgba(0,0,0,0); height:0line-height:0font-size:0
  5.     .label-arrow-l{top:6px; left:-8pxborder-right-color:#0a9
  6.     .label-arrow-r{top:6px; right:-8pxborder-left-color:#0a9
  7.     .label-arrow-t{top:-8px; left:50%margin-left:-4pxborder-bottom-color:#0a9
  8.     .label-arrow-b{bottom:-8px; left:50%margin-left:-4pxborder-top-color:#0a9
  9. </style> 

相关的HTML代码:

  1. <label class="label"> 
  2.     <a href="http://www.exp99.com/f2e/">前端开发</a> 
  3.     <i class="label-arrow label-arrow-l"></i> 
  4. </label> 
  5. <label class="label"> 
  6.     <a href="http://www.exp99.com/htmlcss/">HTML+CSS</a> 
  7.     <i class="label-arrow label-arrow-r"></i> 
  8. </label> 
  9. <label class="label"> 
  10.     <a href="http://www.exp99.com/yunwei/">网站运维</a> 
  11.     <i class="label-arrow label-arrow-t"></i> 
  12. </label> 
  13. <label class="label"> 
  14.     <a href="http://www.exp99.com/dedecms/">织梦CMS</a> 
  15.     <i class="label-arrow label-arrow-b"></i> 
  16. </label> 

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

 

RGBA颜色

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

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

css的border属性

  1. <span class="border"></span> 
  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. <div class="item-num-wrap"> 
  2.     <span class="arrow-outer"></span> 
  3.     <span class="arrow-inner"></span> 
  4.     <span class="item-num">78</span> 
  5. </div> 
  6. <p>讨论任何WEB技术问题!让我们一起“益享天开”</p> 

CSS关键代码:

  1. .item-num-wrap { 
  2.     floatleft
  3.     margin-right10px
  4.     width36px
  5.     height19px
  6.     line-height19px
  7.     text-aligncenter
  8.     border1px solid #dcdcdc
  9.     background#fff
  10.     positionrelative
  11. .arrow-outer, .arrow-inner { 
  12.     positionabsolute
  13.     /*在一个声明中设置所有字体属性 Unicode编码\5b8b\4f53表示宋体*/ 
  14.     font400 12px/19px simsun \5b8b\4f53
  15.     width12px
  16.     overflowhidden
  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编码\5b8b\4f53


  

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

 

相关经验

导读书签
书签初始化中…