首页 新闻 会员 周边 捐助

有看过boostrap的吗，title信息边上的小尖是怎么做出来的

0
[已解决问题] 解决于 2014-12-03 09:22

http://v3.bootcss.com/javascript/#tooltips

这是地址，在Static tooltip这里，有个上下左右四个例子，这些title文本边上的小尖是怎么做出来的，我用查看器看样式怎么看不出来？求指教。

北在北方的主页 北在北方 | 初学一级 | 园豆：180
提问于：2014-11-30 11:00
< >
分享
最佳答案
0
.tooltip.top .tooltip-arrow {
  1. bottom: 0;
  2. left: 50%;
  3. margin-left: -5px;
  4. border-width: 5px 5px 0;
  5. border-top-color: #000;
}
 
 
 
 
.tooltip-arrow {
  1. position: absolute;
  2. width: 0;
  3. height: 0;
  4. border-color: transparent;
  5. border-style: solid;
}
 
 
查看那里的样式是这么写的  大概的原理就是设置一个div的border-color为transparent（透明）; 然后border-width: 5px 5px 0;这里加粗border   然后设置border-right-color: #000;  左边框的border颜色，位置什么的自己再定位下就好啦，不知道我说的意思你明不明白
奖励园豆：5
柠檬果子 | 菜鸟二级 |园豆：233 | 2014-12-02 17:37
其他回答(1)
0

我看了下源码，额外使用了一个div做到的

袁家小黑球 | 园豆：1045 (小虾三级) | 2014-11-30 18:54

我知道是跟这个class="tooltip-arrow"有关，但是这个小尖既不像是图片也不是字体图标，css代码也看不懂是怎么搞出这个小尖的，我想知道的就是这个，解释以下写出这个小尖的css

支持(0) 反对(0) 北在北方 | 园豆：180 (初学一级) | 2014-12-01 10:01
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。