如何使用纯CSS绘制聊天气泡
如何使用纯CSS绘制聊天气泡
提问于 2017-10-11 21:34:15
我发现更多的样本使用CSS来绘制聊天气泡，但我找不到如何绘制这些气泡，我不知道顶部的角度
首先，谢谢，在这些问题中的所有建议，我有一个错误，没有上传我尝试过的代码。
最后，谢谢，@holden的回答是正确的，我在得到如何使用三角形的想法后上传了我的代码:之后，如果有人有同样的问题，我想它可以给你一些想法:)
如果您想编辑我的最终代码，您可以转到在线编辑器(https://jsfiddle.net/ypgou3wy/)。
/* layout */
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.logo {
display: inline-block;
}
/* main */
@mixin tringleWithInCircule() {
position: absolute;
top: -22px;
left: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 37px 43px;
border-top-right-radius: 5px;
border-color: transparent transparent blue transparent;
}
.logo {
width: 100px;
height: 100px;
border-radius: 100%;
background: blue;
position: relative;
}
.logo1:after {
content: '';
position: absolute;
top: -22px;
left: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 37px 43px;
border-top-right-radius: 5px;
border-color: transparent transparent blue transparent;
}
.logo2 {
transform: scaleY(-1);
}
.logo2:after {
content: '';
position: absolute;
top: -22px;
left: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 37px 43px;
border-top-right-radius: 5px;
border-color: transparent transparent blue transparent;
}
.logo3 {
transform: scaleY(-1) scaleX(-1);
}
.logo3:after {
content: '';
position: absolute;
top: -22px;
left: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 37px 43px;
border-top-right-radius: 5px;
border-color: transparent transparent blue transparent;
}
.logo4 {
transform: scaleX(-1);
}
.logo4:after {
content: '';
position: absolute;
top: -22px;
left: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 37px 43px;
border-top-right-radius: 5px;
border-color: transparent transparent blue transparent;
}<div class="logo logo1">
</div>
<div class="logo logo2">
</div>
<div class="logo logo3">
</div>
<div class="logo logo4">
</div>
回答 2
Stack Overflow用户
发布于 2019-10-03 16:23:50
这是一段创建演讲气泡的代码。您还可以更改变量和指针位置here
.speech-bubble {
position: relative;
background: #00aabb;
border-radius: .4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -15px;
margin-bottom: -30px;
}Stack Overflow用户
发布于 2017-11-04 11:28:16
这个CSS应该可以让你上手了，只需要尝试一下就可以了：
#speech-bubble {
width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-right: 26px solid blue;
border-bottom: 23px solid transparent;
margin: 13px 0 0 -25px;
}这是JS Bin demo。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46689608
复制相关文章
相似问题