CSS實現帶箭頭的提示框

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

先上效果圖：

原理分析：

    上面的箭頭有沒有覺得很像一個三角形，是的，它就是三角形；只不過它這個尖角是通過兩個三角形來實現的；

首先新建一個div，畫出提示框的輪廓

<div class="demo"></div>

給定樣式：

    .demo{
        width:100px;
        height:100px;
        position:absolute;
        top: 35%;
        left:40%;   
        border:2px solid red;
        border-radius:8px;
    }

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

關鍵點：

   現在我們在class=“demo”的div里面加入一個子級元素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%;
    }

寬高都設為0；然后設置一個邊框的寬度，暫且設為100，邊框顏色自己設定；此時的應該是一個200*200的正方形，因為上下邊框相加為200px；左右邊框相加為200px；

效果圖：

 

 

然后我們現在只需要它的下面（下面的三角形）的一部分；

    .shixin{
        width:0;
        height:0;
        border:100px solid transparent;
        border-bottom-color:red;
        position: relative;
        top: -21%;
        left:15%;
    }

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

 

 

 

然后我們適當的調整一下大小，三角形的大小是通過border的寬度來調的，因為這個其實就是border的寬度；

 

 

就這樣，一個實心的三角形提示框效果已經出來了，但是別人UI框架都是空心的啊，沒關系，我們接着往下走：

在class="demo"的div下面再加一個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%;
    }

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

 

 

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