带上下左右箭头的标签效果：
纯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（不止前端技术）
本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。
)
){kind=link}