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

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

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

相关的CSS代码：

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

相关的HTML代码：

 
    前端开发 
     
 
 
    HTML+CSS 
     
 
 
    网站运维 
     
 
 
    织梦CMS 
     
 

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

RGBA颜色：

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

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

css的border属性

.border{ 
    float:left; 
    border-width:100px; 
    border-style:solid; 
    border-left-color:red; 
    border-right-color:blue; 
    border-top-color:green; 
    border-bottom-color:#666 
}  

以上样式的border效果：

css的border效果

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

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

第二种方法：

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

HTML结构：

 
    ◆ 
    ◆ 
    78 
 
讨论任何WEB技术问题！让我们一起“益享天开”
 

CSS关键代码：

.item-num-wrap { 
    float: left; 
    margin-right: 10px; 
    width: 36px; 
    height: 19px; 
    line-height: 19px; 
    text-align: center; 
    border: 1px solid #dcdcdc; 
    background: #fff; 
    position: relative; 
} 
.arrow-outer, .arrow-inner { 
    position: absolute; 
    /*在一个声明中设置所有字体属性 Unicode编码b8bf53表示宋体*/ 
    font: 400 12px/19px simsun b8bf53; 
    width: 12px; 
    overflow: hidden; 
} 
.arrow-outer { 
    color: #dcdcdc; 
    top: 1px; 
    right: -7px; 
} 
.arrow-inner { 
    color: #fff; 
    top: 1px; 
    right: -6px; 
} 
.item-num{ 
    color:#999; 
} 

效果：

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

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

运行代码 复制代码 收藏本页

如果对前端有兴趣，欢迎加入前端技术QQ群：239274519（不止前端技术）

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

 

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