html推荐三⾓⾓标，纯CSS实现箭头、⽓泡让提⽰功能具有三⾓
形图标
演⽰地址：CSS Triangles Demo
本⽂两种实现⽅式: 使⽤或不使⽤ before 和 :after 伪元素(伪类,pseudo-elements)
最近重新设计了我的⽹站，准备添加tooltips提⽰信息效果.实现很容易，但我想要让提⽰功能具有三⾓形的指⽰图标。
当我重新思考想要所设计的每个图标颜⾊都随⼼所欲的时候，采⽤图⽚那就是⼀场灾难。
幸运的是, MooTools 的核⼼开发者 Darren Waddell介绍了⼀个强⼤的技巧给我：CSS三⾓形.只使⽤纯CSS语⾔，你就能创建兼容各个浏览器的三⾓形，⽤很少的代码。
不使⽤伪类的 CSS 代码如下:
复制代码代码如下:
/* 向上的箭头，类似于A，只有三个边，不能指定上边框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左边框的宽 */
border-right: 5px solid transparent; /* 右边框的宽 */
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|⾼，以及背景⾊ */
font-size: 0;
line-height: 0;}
/* 向下的箭头 类似于 V */css怎么创建
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭头: 只有三个边：上、下、右。⽽
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的⾼ */
border-top: 15px solid transparent; /* 上⽅边框的⾼ */
border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景⾊ */
font-size: 0;
line-height: 0;
}
/* 向右的箭头: 只有三个边：上、下、左。⽽ |> 总体来看，向右三⾓形的⾼=上+下边框的长度。 宽=左边框的长度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的⾼ */
border-top: 15px solid transparent; /* 上⽅边框的⾼ */
border-left: 60px solid green; /* 左边框的长度|宽度，以及背景⾊ */
font-size: 0;
line-height: 0;
}
其中的秘密，就是这些三⾓形在你要指向的⽅向垂直的两边, 有巨⼤的边框,⽽让背⾯的边框设置为你喜欢的颜⾊即可。
边框越⼤，三⾓形就越⼤。调整三个边框的长度，就可以构建出各种不同的三⾓形。如果加上旋转，不知道似的否可以指定各种不同⽅向的图形?
当然，这个处理⽅法优越的地⽅就在于代码量⾮常少，同时⾮常灵活。
带有 :before 和 :after 的CSS三⾓形
前⾯的例⼦可以很好的⼯作，但是如果你想要不只是⼀个三⾓形怎么办？⽐如⽓泡对话框，那么可以
使⽤伪类来实现CSS三⾓形箭头，对于弹出的提⽰信息来说⾮常完美，代码如下：
复制代码代码如下:
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* 向上的箭头 */
/* top-stacked, smaller arrow */
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: -19px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
⼀般来说在箭头的背⾯边框指定颜⾊，也可以只使⽤ :before 或者 :after 之中的⼀个。⽽第⼆个箭头，可以被当作背景边框，或者作为第⼀个的阴影。
我想问⾃⼰为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来⼤⼤的提⾼制作tooltip元素的⽔平，同时也为我打开了⼀个⼴阔的视野。
完整的页⾯⽰例代码如下：
复制代码代码如下:
CSS 箭头Demo
/* 向上的箭头，类似于A，只有三个边，不能指定上边框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左边框的宽 */
border-right: 5px solid transparent; /* 右边框的宽 */
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|⾼，以及背景⾊ */
font-size: 0;
line-height: 0;
}
/* 向下的箭头 类似于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭头: 只有三个边：上、下、右。⽽
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的⾼ */
border-top: 15px solid transparent; /* 上⽅边框的⾼ */
border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景⾊ */
font-size: 0;
line-height: 0;
}
/* 向右的箭头: 只有三个边：上、下、左。⽽ |> 总体来看，向右三⾓形的⾼=上+下边框的长度。 宽=左边框的长度 */ div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的⾼ */
border-top: 15px solid transparent; /* 上⽅边框的⾼ */
border-left: 60px solid green; /* 左边框的长度|宽度，以及背景⾊ */
font-size: 0;
line-height: 0;
}
/* 基本样式 */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* 箭头 - :before and :after, ⼀起组成了好看的⽓泡⼩箭头 */ .tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
/* 背景阴影*/
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
}
CSS 箭头Demo
以下代码.是极好的纯 CSS 箭头样式，不使⽤背景图!
向上的箭头
向下的箭头
向左的箭头
向右的箭头

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。