在开发中,我们经常会需要用到鼠标移到提示信息,然后经常会需要各式各样的提示框,首先我们要知道如下的三角形是怎么形成的。
- 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;可以看看下面的例子:
- 气泡一
<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; }
- 气泡二
<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了