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

先上效果圖：

原理分析：

上面的箭頭有沒有覺得很像一個(gè)三角形，是的，它就是三角形；只不過它這個(gè)尖角是通過兩個(gè)三角形來實(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;
    }

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

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

現(xiàn)在我們在class=“demo”的div里面加入一個(gè)子級元素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)整一下大小，三角形的大小是通過border的寬度來調(diào)的，因?yàn)檫@個(gè)其實(shí)就是border的寬度；

就這樣，一個(gè)實(shí)心的三角形提示框效果已經(jīng)出來了，但是別人UI框架都是空心的啊，沒關(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)為白色，然后通過position：relative相對定位移到實(shí)心三角形處進(jìn)行重合即可；
 

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)帶箭頭的提示框效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論