Html开发之箭头视图原来可以这么做

回看我之前的文章清一色的iOS开发，怎么突然搞起了html，正如我网名一样我还是个菜鸟，前端开发也是刚刚接触，在这就现学现卖O(∩_∩)O哈哈~，直接进入正题。

方法一：通过css来实现具体效果如下

html代码如下：

<div class="out">   
   <div class="in">
   </div>
</div>

css代码如下：

.out{    
position:absolute;    
top:0px;   
 left: 23px;   
 border-color: transparent transparent white transparent;   
 border-style:dashed dashed solid dashed;   
 border-width:8px;
}

.in{    
position:absolute;    
border-color:transparent  transparent white  transparent;   
 border-style:dashed dashed solid dashed;   
 border-width:8px;   
 top:-7px;   
 left:-8px;
}

作为初学者第一次看到这代码时我也是很奇怪，怎么只设置边框就会出现三角呢。（这是什么鬼），盯着代码研究了半天才搞明白。

首先要做个测试，我们把class为out的标签单独拉出来看 它的border-color是这样设置的

border-color:transparent  transparent white  transparent;

这是什么意思呢，我们稍作修改再看下效果

border-color:transparent  transparent white  white;

再做下修改

border-color:white transparent white  white;

看到这大家差不多就明白了，原来没有内容时设置边框，四个边分别对应的上下左右四个三角形，组成了一个正方形，我们就可以利用这点来获得自己想要的箭头的。

方法二：通过框架实现

除了使用css还有没有其它方法呢，答案是肯定的，不过小菜鸟学识尚浅，就先列举一种吧，有更好的方法欢迎大家留言一起交流。

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap为我们提供了Tooltip（提示工具）和Popover（弹出窗）效果分别如下

当然使用Bootstrap来开发的话效率是很高的。具体要学习的话大家可以找些Bootstrap的教程，有机会之后做一个Bootstrap的简单教程。

好了，今天就分享到这了，你的喜欢是我最大的动力^_^。