CSS實(shí)現(xiàn)帶箭頭的提示框

我們?cè)诤芏郩I框架中看到帶箭頭的提示框，感覺挺漂亮，但是之前一直不知道其原理，今天網(wǎng)上找了些資料算是弄清楚原理了；

先上效果圖：



原理分析：

? ? 上面的箭頭有沒(méi)有覺得很像一個(gè)三角形，是的，它就是三角形；只不過(guò)它這個(gè)尖角是通過(guò)兩個(gè)三角形來(lái)實(shí)現(xiàn)的；

首先新建一個(gè)div，畫出提示框的輪廓
<div class="demo"></div>
給定樣式：
.demo{ width:100px; height:100px; position:absolute; top: 35%; left:40%;
border:2px solid red; border-radius:8px; }

這樣，我們簡(jiǎn)單的一個(gè)正方形提示框就出來(lái)；

關(guān)鍵點(diǎn)：

? ?現(xiàn)在我們?cè)赾lass=“demo”的div里面加入一個(gè)子級(jí)元素div
<div class="demo"> <div class="shixin"></div> </div>
添加樣式：
.shixin{ width:0; height:0; border:100px solid ; border-color:red green
yellow blue; position: relative; top: -21%; left:15%; }

寬高都設(shè)為0；然后設(shè)置一個(gè)邊框的寬度，暫且設(shè)為100，邊框顏色自己設(shè)定；此時(shí)的應(yīng)該是一個(gè)200*200的正方形，因?yàn)樯舷逻吙蛳嗉訛?00px；左右邊框相加為200px；

效果圖：



?

?

然后我們現(xiàn)在只需要它的下面（下面的三角形）的一部分；
.shixin{ width:0; height:0; border:100px solid transparent;
border-bottom-color:red; position: relative; top: -21%; left:15%; }

切記：border屬性的顏色一定要寫為transparent（透明），不然默認(rèn)為黑色；然后我們需要下面的三角形，我們只需要用border-bottom-color屬性給下邊框添加顏色即可稱為實(shí)心三角形；



?



?

?

然后我們適當(dāng)?shù)恼{(diào)整一下大小，三角形的大小是通過(guò)border的寬度來(lái)調(diào)的，因?yàn)檫@個(gè)其實(shí)就是border的寬度；



?



?

就這樣，一個(gè)實(shí)心的三角形提示框效果已經(jīng)出來(lái)了，但是別人UI框架都是空心的啊，沒(méi)關(guān)系，我們接著往下走：

在class="demo"的div下面再加一個(gè)div
<div class="demo"> <div class="shixin"></div> <div class="kongxin"></div> </div
>
添加樣式：
.kongxin{ width:0; height:0; border:10px solid transparent;
border-bottom-color:#fff; position: relative; top: -39%; left:15%; }

看到了嗎？我們給這個(gè)三角形也是添加一樣的樣式，實(shí)現(xiàn)空心效果其實(shí)就是將三角形的顏色改為背景色，背景默認(rèn)為白色，然后通過(guò)position：relative相對(duì)定位移到實(shí)心三角形處進(jìn)行重合即可；

?

?

最后我們的帶箭頭的提示框就完成了，感興趣的朋友趕緊自己動(dòng)手試試吧！

• 熱門工具 換一換

  • 1 進(jìn)制轉(zhuǎn)換
  • 2 GIF生成器
  • 3 時(shí)間戳轉(zhuǎn)換器
  • 4 Cron表達(dá)式生成器
  • 5 身份證歸屬地、性別、出生日期、年齡查詢
  • 6 計(jì)算器
  • 7 衣服尺碼計(jì)算
  • 8 文本對(duì)比
  • 9 圖像顏色識(shí)別
  • 10 圖像文字識(shí)別
  • 11 Base64編碼解碼
  • 12 日期計(jì)算器
  • 13 人臉識(shí)別
  • 14 照片轉(zhuǎn)素描
  • 15 摩斯電碼
  • 16 顏色選擇器
  • 17 文字加密解密
  • 18 端口掃描器
  • 19 卡通頭像制作
  • 20 單位換算