带上下左右箭头的标签效果:
纯css实现带箭头的标签效果
相关的CSS代码:
相关的HTML代码:
整个粘贴到页面任何地方都可以呈现带箭头的标签效果。
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(不止前端技术)
本站声明:本站部分文章来自网络,由用户上传分享,如若内容侵犯了您的合法权益,可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。