Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

带箭头提示框总结及实例 - jerrylsxu

WBOY
Release： 2016-05-20 13:48:55
Original
1127 people have browsed it

 

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是css来实现，本文介绍三种通过css实现带箭头的提示框。

  1. 通过border属性
    思路：两个三角形，通过定位使两个三角形相差1px作为边框。
  2. CSS3 transfrom
    思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了
  3. 特殊字符'♦'
    思路：特殊字符漏出上半部分，看上去就像三角形了

一、通过border属性：

我们先做一个宽和高都是10px的div，边框也是10px，

<span style="color: #008080;">1</span> <span style="color: #800000;">width: 10px;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">height: 10px;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border: 10px solid;
</span><span style="color: #008080;">4</span> <span style="color: #800000;">border-color: red green yellow blue; </span>
Copy after login

如下图：

图中间空白是我们设置的宽和高，如果设置为0px，会出现什么情况呢？，如下图：

 

这时候我们就可以通过设置它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了。如下图：

 现在我们来实现第一幅图上的效果：

css：

复制代码
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow</span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius</span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        left</span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        border-width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;">        border-style</span>:<span style="color: #0000ff;">solid dashed dashed dashed</span>;
<span style="color: #008080;">22</span>     }
<span style="color: #008080;">23</span> <span style="color: #800000;">    .nav-border </span>{
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-20px</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">        border-color</span>:<span style="color: #0000ff;">transparent transparent #DACE7C transparent</span>;
<span style="color: #008080;">26</span>     }
<span style="color: #008080;">27</span> <span style="color: #800000;">    .nav-background </span>{
<span style="color: #008080;">28</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-19px</span>;
<span style="color: #008080;">29</span> <span style="color: #ff0000;">        border-color</span>:<span style="color: #0000ff;">transparent transparent #F6F1B3 transparent</span>;
<span style="color: #008080;">30</span>     }
Copy after login
复制代码

 

 html：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-border"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-background"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
Copy after login

 

二、 CSS3 transfrom

我们首先制作一个两条相邻的边框颜色相同，其他两条边边框为0px的div方框。如图：

在将方框旋转45度就可以实现三角提示效果了。

css：

复制代码
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top    </span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position      </span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width         </span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height        </span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height   </span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background    </span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow    </span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border        </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius </span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align    </span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color         </span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position          </span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        top               </span>:<span style="color: #0000ff;">-8px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        left              </span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        overflow          </span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        width             </span>:<span style="color: #0000ff;">13px</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        height            </span>:<span style="color: #0000ff;">13px</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;">        background        </span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;">        border-left       </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;">        border-top        </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        -webkit-transform </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">        -moz-transform    </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">26</span> <span style="color: #ff0000;">        -o-transform      </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">27</span> <span style="color: #ff0000;">        transform         </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">28</span>     }
Copy after login
复制代码

 

html：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>
Copy after login

 

三、特殊字符'♦' 

 '♦'是一个特殊字符，也就相当于一个字，所以大小是通过font-size来设置，实现第一幅图的效果：

css：

复制代码
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow</span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius</span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        left</span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">24px</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">24px</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        font</span>:<span style="color: #0000ff;">normal 24px "微软雅黑"</span>;
<span style="color: #008080;">21</span>     }
<span style="color: #008080;">22</span> <span style="color: #800000;">    .nav-border </span>{
<span style="color: #008080;">23</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-17px</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">#DACE7C</span>;
<span style="color: #008080;">25</span>     }
<span style="color: #008080;">26</span> <span style="color: #800000;">    .nav-background </span>{
<span style="color: #008080;">27</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-16px</span>;
<span style="color: #008080;">28</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;">29</span>     }
Copy after login
复制代码

 

html：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-border"</span><span style="color: #0000ff;">></span>♦<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-background"</span><span style="color: #0000ff;">></span>♦<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
Copy after login

 

 

 

下面是一个兼容IE5.5+,chrome,Firfox等浏览器的一个demo，如果你有用到可以直接考到自己的项目中。

复制代码
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>  <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>  <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>  <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">  div.container</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top              </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left             </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 9pt</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">14</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width            </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">15</span> <span style="background-color: #f5f5f5; color: #ff0000;">        background-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">16</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">17</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">18</span> <span style="background-color: #f5f5f5; color: #800000;">    s</span><span style="background-color: #f5f5f5; color: #000000;">{</span> 
<span style="color: #008080;">19</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position     </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">20</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-22px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  
<span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #ff0000;">        line-height  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent transparent #666 transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-style </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">dashed dashed solid dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-width </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">31</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #800000;">    i</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position     </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-9px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">35</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-9px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">36</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">37</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">38</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">39</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">40</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">41</span> <span style="background-color: #f5f5f5; color: #ff0000;">        line-height  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">42</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent transparent #fff transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-style </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">dashed dashed solid dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">44</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-width </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">45</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">46</span> <span style="background-color: #f5f5f5; color: #800000;">    .content</span><span style="background-color: #f5f5f5; color: #000000;">{</span> 
<span style="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border                </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -moz-border-radius    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -webkit-border-radius </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">50</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position              </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">51</span> <span style="background-color: #f5f5f5; color: #ff0000;">        background-color      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">52</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width                 </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height                </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">54</span> <span style="background-color: #f5f5f5; color: #ff0000;">        padding               </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">5px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top                  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-2px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">56</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-top           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">57</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-top           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">58</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-left          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-right         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *height               </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">102px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #ff0000;">        box-shadow            </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">62</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -moz-box-shadow       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">63</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -webkit-box-shadow    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">64</span>         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> For IE 5.5 - 7 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">65</span> <span style="background-color: #f5f5f5; color: #ff0000;">        filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">66</span>         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> For IE 8 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span> 
<span style="color: #008080;">67</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -ms-filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  
<span style="color: #008080;">68</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">69</span>  <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">70</span> <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">71</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">72</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">73</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">74</span> <span style="color: #000000;">            hello world!
</span><span style="color: #008080;">75</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">76</span>         <span style="color: #0000ff;"><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span>             <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">78</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">79</span>  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">80</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">81</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login
复制代码

 

效果图：

小结： 

　　带箭头的提示框给用户的交互带来很好的效果，本文介绍了三个方法，如果你还有其他方法可以@me，我会非常感激。希望本文能够对你有些帮助。

Related labels：
带箭头提示框总结及实例 - jerrylsxu
source：php.cn
Previous article：锚的神秘面纱 - 北风吹雪 Next article：一次WEB前端优化尝试 - jerrylsxu
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1870
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
2036
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1713
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1614
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1627
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template