css气泡对话框代码实例

日期: 2022-12-08 13:45:54 分类: 前端浏览量：留言数： 98627

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

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

代码实例如下:

<!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气泡对话框代码实例属于前端实例代码，有关更多实例代码大家可以查看。