css气泡对话框代码实例

我心飞翔 分类:实例代码

分享一段代码实例,它实现了气泡对话框效果。

也就是带有小箭头的那种对话框。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.box {
  position: relative;
  width: 150px;
  height: 80px;
  border: 1px solid #333;
  margin: 40px;
  border-radius: 5px;
  text-align: center;
  line-height: 80px;
  background-color: #FFF5EE;
}
.antzone {
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: -32px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
.antzone > div {
  position: absolute;
  width: 0;
  height: 0;
  left: -15px;
  top: -14px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent #FFF5EE transparent;
}
</style>
</head>
<body>
<div class="box ">
  <div class="antzone">
    <div></div>
  </div>
  犀牛前端部落欢迎您
  </div>
</body>
</html>

代码非常的简单,具体实现过程这里就不多介绍了,只是简单提示一下实现原理,如果一个元素的尺寸为0,那么通过边框就可以挤压成三角形效果,然后将其他三个边框设置为透明,就会剩下一个三角形;然后将两个三角形重合起来,通过定位,将一个三角形覆盖在另一个三角形之上,并露出1px的线条,就实现我们的效果。

css气泡对话框代码实例,这样的场景在实际项目中还是用的比较多的,关于css气泡对话框代码实例就介绍到这了。

css气泡对话框代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容