csss實現的幾種氣泡小提示框

  

在開發中，我們經常會需要用到鼠標移到提示信息，然後經常會需要各式各樣的提示框，首先我們要知道如下的三角形是怎麼形成的。

• border屬性

三角形都是在content高度、寬度爲0的情況下，靈活運用border屬性來完成的，舉個例子：

<div><p class="star1"></p></div>

.star1{
    position: absolute;
    left:250px;
    border-top:10px solid blue;
    border-right: 10px solid red; 
    border-bottom: 10px solid black;
    border-left: 10px solid gold;
}

會出現如下的圖形：

要使用什麼形狀的三角形，可以設置對應邊的border.然後將其它邊設置爲transpanrant；可以看看下面的例子：

1. 氣泡一

<p class="base test">這就是一條測試</p>

.base{

    height: 20px;

    width: 150px;

    border: 1px solid red;

    position: relative;

    margin-left: 20px;

    border-radius: 4px;

}

.test:before, .test:after{

    content: '';

/*    border-width: 10px;*/

   /* border-style: solid;*/

    border: 10px solid transparent;

    border-right: 15px solid red;

    border-bottom: 0;

    position: absolute;

    left:-21px;

    top:17px;

  transform:rotate(-28deg);



}

.test:after{

    border: 10px solid transparent;

    border-right: 10px solid #fff;

    border-bottom: 0;

    left:-16px;

    top:14px;

}

 

1. 氣泡二

<div> <p class="base star-left">測試</p></div>

    .star-left:before{

        content: '';

        left:-8px;

        top:2px;

        position: absolute;

      border-right: 8px solid red;

        border-top: 8px solid transparent;

        border-bottom: 10px solid transparent;

    }

.star-left:after{

    content: '';

    left:-6px;

    top:2px;

    position: absolute;

    border-right: 8px solid #fff;

    border-top: 8px solid transparent;

    border-bottom: 10px solid transparent;

}

（3）氣泡三

<div> <p class="base star-bottom">測試</p></div>

    .star-bottom:before{

        content: '';

        position: absolute;

        top:20px;

        left:50px;

        border-right: 8px solid transparent;

        border-top: 8px solid red;

        border-left: 10px solid transparent;

    }

.star-bottom:after{

    content: '';

    position: absolute;

    top:19px;

    left:50px;

    border-right: 8px solid transparent;

    border-top: 8px solid #fff;

    border-left: 10px solid transparent;

}

從上面的例子可知，都會有一個before和after，其實樣式都是一樣的，只是用after的#fff顏色把before裏面的顏色填滿，留下一條線，當然你如果只需要實線的，那麼就無需after了