我們在很多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相對定位移到實心三角形處進行重合即可;
最後我們的帶箭頭的提示框就完成了,感興趣的朋友趕緊自己動手試試吧!