写在前面
对话气泡效果，在一些聊天工具里，我们会经常看到，最直接就是我们微信聊天工具，我们每天都会见到这样的效果，但是，如果要实现这样一个效果，你会有哪些方法呢？
今天，我们就一起来写一个这样的效果，这里有4个方向的气泡，你可以根据具体项目来实现某个方向的效果，或者某几个方向的，总之，里面不会涉及到任何一张图片。
我们还是一起来看看这个最终效果：
HTML:
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】166—纯CSS实现响应式对话气泡效果</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”widget-wrap”>
<div class=”speech top”>
如果温柔是罪，那就只能用拳头来洗清我们犯下的罪孽。
</div>
<div class=”speech bottom”>
如果不能忠于自己的心，胜负又有什么价值呢？
</div>
<div class=”speech left”>
人闲桂花落，夜静春山空。爱，其实很简单，困难的是去接受它。
</div>
<div class=”speech right”>
已经无法回到过去了。也不知道将来会是什么模样。
</div>
</div>
</body>
</html>
CSS:
.speech {
font-size: 1.1em;color: #fff;
background: #a53d38;position: relative;
padding: 20px;
border-radius: 10px;
margin: 50px auto;
max-width: 320px;
}
.speech::after {
content: “”;
border: 20px solid transparent;position: absolute;
}
.bottom.speech::after {border-top-color: #a53d38;
border-bottom: 0;bottom: -20px; left: 50%;
margin-left: -20px;
}.top.speech::after {
border-bottom-color: #a53d38;
border-top: 0;
top: -20px; left: 50%;
margin-left: -20px;
}.left.speech::after {
border-right-color: #a53d38;
border-left: 0;left: -20px; top: 50%;
margin-top: -20px;
}.right.speech::after {
border-left-color: #a53d38;
border-right: 0;right: -20px; top: 50%;
margin-top: -20px;
}* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
body {
display: flex;
align-items: center; justify-content: center;
min-height: 100vh;
background-color: #444;
background-position: center;
background-size: cover;
text-align: center;
}.widget-wrap {
max-width: 500px;
padding: 30px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.4);
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
