气泡对话框

最新推荐文章于 2024-09-21 23:59:03 发布

七月格

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量258

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_42457563/article/details/94447669

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平时不用气泡都忘了</title>
<style>
#boxshadow {
position: relative;
width: 300px;
}

/* Make the image fit the box */
#boxshadow div {
   width:100px;
height:30px;
   margin-left:10px;
   background:rgba(245,245,245,1);
border: 1px solid #000000;
   border-radius:5px;
}

#boxshadow::before,#boxshadow::after {
content: '';
position: absolute;
   top:6px;
   width:0px;
   height:0px;
   border:10px solid transparent;
}
#boxshadow::before{
       left:-9px;
       border-right-color:rgba(245,245,245,1);
       z-index:1
   }
#boxshadow::after{
       left: -10px;
       border-right-color: rgba(0, 0, 0, 1);
       z-index:0
   }
</style>

</head>
<body>