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

 

 

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

posted @ 2019-10-14 16:13 有夢想的咸魚前端 閱讀(...) 評論(...) 編輯 收藏