CSS实现气泡聊天框或弹框
2022-08-07 本文已影响0人
凌川江雪
效果：
- 三角的方向处理，核心在于
border-color的编码， 直接上代码：
<!DOCTYPE html>
<html>
<head>
<title>dialog</title>
<style type="text/css">
.div {
background-color: rgba(0, 0, 0, 0.7);
color: white;
width: 200px;
height: 34px;
font-size: 8px;
border-radius: 10px;
padding: 10px;
margin-top: 50px;
box-shadow: 5px 5px 10px #888888;
}
.div::after{
content: '';
width: 0;
height: 0;
border: 6px solid;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
position: relative;
bottom: 48px;
right: 20px;
}
</style>
</head>
<body>
<div class = "div">不是吧不是吧不是吧不是吧不是吧不是吧不是吧</div>
</body>
<script type="text/javascript">
