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相對定位移到實心三角形處進行重合便可；

 

 

最後咱們的帶箭頭的提示框就完成了，感興趣的朋友趕忙本身動手試試吧！