【每日一练】166—纯CSS实现响应式对话气泡效果

每日一练10个月前发布 admin
1,393 0

写在前面

对话气泡效果,在一些聊天工具里,我们会经常看到,最直接就是我们微信聊天工具,我们每天都会见到这样的效果,但是,如果要实现这样一个效果,你会有哪些方法呢?

今天,我们就一起来写一个这样的效果,这里有4个方向的气泡,你可以根据具体项目来实现某个方向的效果,或者某几个方向的,总之,里面不会涉及到任何一张图片。

我们还是一起来看看这个最终效果:

【每日一练】166—纯CSS实现响应式对话气泡效果

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);
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...