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了