Table of Contents
一、通过border属性:
二、 CSS3 transfrom
三、特殊字符'♦' 
小结: 
Home Web Front-end HTML Tutorial 带箭头提示框总结实例

带箭头提示框总结实例

Jun 16, 2016 am 08:39 AM

 

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是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,我会非常感激。希望本文能够对你有些帮助。

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles