三種帶箭頭提示框總結(jié)實(shí)例

2019-11-20 09:42:29

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

無(wú)論是提示框還是導(dǎo)航欄都能看到如上圖所示的帶有箭頭的框框，這種箭頭可以通過(guò)背景圖片或者是css來(lái)實(shí)現(xiàn)，本文介紹三種通過(guò)css實(shí)現(xiàn)帶箭頭的提示框。

1.通過(guò)border屬性

思路：兩個(gè)三角形，通過(guò)定位使兩個(gè)三角形相差1px作為邊框。

2.CSS3 transfrom

思路：先做一個(gè)兩條邊相同顏色的正方形，然后旋轉(zhuǎn)一定角度就是三角形了

3.特殊字符'♦'

思路：特殊字符漏出上半部分，看上去就像三角形了

一、通過(guò)border屬性：

我們先做一個(gè)寬和高都是10px的div，邊框也是10px，

 width: 10px; height: 10px; border: 10px solid;border-color: red green yellow blue;

如下圖：

圖中間空白是我們?cè)O(shè)置的寬和高，如果設(shè)置為0px，會(huì)出現(xiàn)什么情況呢？，如下圖：

這時(shí)候我們就可以通過(guò)設(shè)置它的左右和下邊框的顏色都設(shè)成透明或和背景顏色相同的顏色，就出來(lái)我們想要的三角形了。如下圖：

現(xiàn)在我們來(lái)實(shí)現(xiàn)第一幅圖上的效果：

css：

.info {   margin-top: 50px;  position:relative;  width:200px;  height:50px;   line-height:60px;  background:#F6F1B3;  box-shadow:1px 2px 3px #E9D985;  border:1px solid #DACE7C;  border-radius:4px;  text-align:center;  color:red;  } .nav {   position:absolute;  left:30px;   overflow:hidden;  width:0;  height:0;   border-width:10px;  border-style:solid dashed dashed dashed; }  .nav-border {   top:-20px;  border-color:transparent transparent #DACE7C transparent; } .nav-background {  top:-19px;  border-color:transparent transparent #F6F1B3 transparent; }

html：

<div class="info">  <span>提示信息</span>  <div class="nav nav-border"></div>  <div class="nav nav-background"></div> </div>

二、CSS3 transfrom

我們首先制作一個(gè)兩條相鄰的邊框顏色相同，其他兩條邊邊框?yàn)?px的div方框。如圖：

在將方框旋轉(zhuǎn)45度就可以實(shí)現(xiàn)三角提示效果了。

css：

.info {   margin-top : 50px;   position  :relative;   width   :200px;   height  :50px;   line-height :60px;   background :#F6F1B3;   box-shadow :1px 2px 3px #E9D985;   border  :1px solid #DACE7C;   border-radius :4px;   text-align :center;   color   :red;  }  .nav {   position   :absolute;   top    :-8px;   left    :30px;   overflow   :hidden;   width    :13px;   height   :13px;   background  :#F6F1B3;   border-left  :1px solid #DACE7C;  border-top  :1px solid #DACE7C;  -webkit-transform :rotate(45deg);  -moz-transform :rotate(45deg);  -o-transform  :rotate(45deg);   transform   :rotate(45deg);  }

html：

 <div class="info">  <span>提示信息</span>  <div class="nav"></div> </div>

三、特殊字符'♦'

'♦'是一個(gè)特殊字符，也就相當(dāng)于一個(gè)字，所以大小是通過(guò)font-size來(lái)設(shè)置，實(shí)現(xiàn)第一幅圖的效果：

css：

 .info {   margin-top: 50px;   position:relative;   width:200px;   height:50px;   line-height:60px;   background:#F6F1B3;   box-shadow:1px 2px 3px #E9D985;   border:1px solid #DACE7C;   border-radius:4px;   text-align:center;   color:red; }  .nav {   position:absolute;   left:30px;   overflow:hidden;  width:24px;  height:24px;   font:normal 24px "微軟雅黑";  }  .nav-border {  top:-17px;   color:#DACE7C;  }  .nav-background {   top:-16px;   color:#F6F1B3;  }

html：

<div class="info">  <span>提示信息</span>  <div class="nav nav-border">♦</div>  <div class="nav nav-background">♦</div> </div>

下面是一個(gè)兼容IE5.5+,chrome,Firfox等瀏覽器的一個(gè)demo，如果你有用到可以直接考到自己的項(xiàng)目中。

 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><style> div.container{   position   :absolute;    top    :30px;    left    :40px;    font-size  : 9pt;    display   :block;    height   :100px;    width   :200px;    background-color :transparent;    *border   :1px solid #666;   }  s{    position  :absolute;    top   :-20px;    *top   :-22px;   left   :20px;    display  :block;   height  :0;   width  :0;   font-size : 0;    line-height : 0;    border-color :transparent transparent #666 transparent;    border-style :dashed dashed solid dashed;    border-width :10px;   }  i{   position  :absolute;   top   :-9px;    *top   :-9px;   left   :-10px;   display  :block;    height  :0;    width  :0;    font-size : 0;    line-height : 0;    border-color :transparent transparent #fff transparent;    border-style :dashed dashed solid dashed;    border-width :10px;   }   .content{    border    :1px solid #666;   -moz-border-radius :3px;    -webkit-border-radius :3px;    position    :absolute;    background-color  :#fff;    width     :100%;    height    :100%;   padding    :5px;    *top     :-2px;    *border-top   :1px solid #666;    *border-top   :1px solid #666;    *border-left   :none;   *border-right   :none;    *height    :102px;    box-shadow   : 3px 3px 4px #999;    -moz-box-shadow  : 3px 3px 4px #999;    -webkit-box-shadow : 3px 3px 4px #999;    /* For IE 5.5 - 7 */   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');   /* For IE 8 */   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";   } </style> </head> <body> <div class="container">   <div class="content">   hello world!  </div>  <s>    <i></i>  </s> </div> </body> </html>

效果圖：