純CSS實現帶小三角提示框

   要實現在頁面上點擊指定元素時，彈出一個信息提示框。在前面的文章中，我們已經簡單介紹了如何使用純 CSS 創建一個三角形。本文在此基礎上，記錄如何使用 CSS 創建帶三角形的提示框。

    實現的原理是創建一個div提示框，然后再創建一個三角形，將三角形用絕對定位（absolute）到提示框對應的位置。

    一、創建不帶邊框的提示框：

    之前已介紹過怎么生成三角形，直接代碼如下：

<style>
    body {
        margin: 0;
        padding: 0;
        background: grey;
    }

    /*提示框容器*/
    .tip {
        position: relative;
        margin-left: 20px;
        margin-top: 20px;
        width: 200px;
        background: #fff;
        padding: 10px;
        /*設置圓角*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    /*提示框-左三角*/
    .tip-trangle-left {
        position: absolute;
        bottom: 15px;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 15px solid #fff;
    }

    /*提示框-右三角*/
    .tip-trangle-right {
        position: absolute;
        top: 15px;
        right: -10px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #fff;
    }

    /*提示框-上三角*/
    .tip-trangle-top {
        position: absolute;
        top: -10px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #fff;
    }

    /*提示框-下三角*/
    .tip-trangle-bottom {
        position: absolute;
        bottom: -10px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #fff;
    }
</style>
<div class="tip">
    <div class="tip-trangle-left"></div>
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip">
    <div class="tip-trangle-right"></div>
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip">
    <div class="tip-trangle-top"></div>
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip">
    <div class="tip-trangle-bottom"></div>
    我是提示框<br/>
    內容可以自定義
</div>
    以上代碼效果如下（我們實現了箭頭在4個不同方向的提示框，在使用時可根據自身需要進行調整）:

    

 

 

    二、創建帶邊框的提示框：

    第一步實現了不帶邊框的提示框，如果要實現帶邊框的提示框，原理是先把提示框容器加上邊框，然后通過偽元素，在需要帶箭頭的邊框上面生成2個三角形，最后改變最上面的三角形的顏色（和提示框的內容背景色相同），即可實現。代碼如下：

<style>
    body {
        margin: 0;
        padding: 0;
        background: grey;
    }

    /*提示框容器-上三角形*/
    .tip-top {
        margin: 20px;
        padding: 5px;
        width: 300px;
        height: 60px;
        border: 2px solid #f99;
        position: relative;
        background-color: #FFF;
        /*設置圓角*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    /*生成2個疊加的三角形*/
    .tip-top:before, .tip-top:after {
        content: "";
        display: block;
        border-width: 15px;
        position: absolute;
        top: -30px;
        left: 100px;
        border-style: solid dashed dashed solid;
        border-color: transparent transparent #f99 transparent;
        font-size: 0;
        line-height: 0;
    }

    /*將上面的三角形顏色設置和容器背景色相同*/
    .tip-top:after {
        top: -27px;
        border-color: transparent transparent #FFF transparent;
    }

    /*下三角*/
    .tip-bottom {
        margin: 20px;
        padding: 5px;
        width: 300px;
        height: 60px;
        border: 2px solid #f99;
        position: relative;
        background-color: #0FF;
        /*設置圓角*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .tip-bottom:before, .tip-bottom:after {
        content: "";
        display: block;
        border-width: 15px;
        position: absolute;
        bottom: -30px;
        left: 100px;
        border-style: solid dashed dashed solid;
        border-color: #f99 transparent transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .tip-bottom:after {
        bottom: -27px;
        border-color: #0FF transparent transparent transparent;
    }

    /*左三角*/
    .tip-left {
        margin: 20px;
        padding: 5px;
        width: 300px;
        height: 60px;
        border: 2px solid #f99;
        position: relative;
        background-color: #FFF;
        /*設置圓角*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .tip-left:before, .tip-left:after {
        content: "";
        display: block;
        border-width: 15px;
        position: absolute;
        left: -30px;
        top: 20px;
        border-style: dashed solid solid dashed;
        border-color: transparent #f99 transparent transparent;
        font-size: 0;
        line-height: 0;
    }

    .tip-left:after {
        left: -27px;
        border-color: transparent #FFF transparent transparent;
    }

    /*右三角*/
    .tip-right {
        margin: 20px;
        padding: 5px;
        width: 300px;
        height: 60px;
        border: 2px solid #f99;
        position: relative;
        background-color: #FFF;
        /*設置圓角*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .tip-right:before, .tip-right:after {
        content: "";
        display: block;
        border-width: 15px;
        position: absolute;
        right: -30px;
        top: 20px;
        border-style: dashed solid solid dashed;
        border-color: transparent transparent transparent #f99;
        font-size: 0;
        line-height: 0;
    }

    .tip-right:after {
        right: -27px;
        border-color: transparent transparent transparent #FFF;
    }
</style>
<div class="tip-top">
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip-bottom">
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip-left">
    我是提示框<br/>
    內容可以自定義
</div>
<div class="tip-right">
    我是提示框<br/>
    內容可以自定義
</div>
</body>
    以上代碼效果如下（我們實現了箭頭在4個不同方向的提示框，在使用時可根據自身需要進行調整）:

    

 

 

    通過以上兩個例子，展示了如何生成簡單的提示框。而對於有邊框的提示框，如果邊框顏色和內容區背景色相同，也會實現無邊框的提示框效果。在使用時，可以根據自己需要，調整代碼。