如何使用纯 CSS 绘制聊天气泡

Question

我发现更多使用 CSS 绘制聊天气泡的示例，但我找不到如何绘制这个气泡，我不知道顶部的角度

---

首先，谢谢，这些问题中的所有建议，我错误地没有上传我尝试过的代码。

最后，谢谢，@holden 回答是正确的，我在知道如何使用三角形后上传我的代码：after，如果有人有同样的问题，我想它可以给你一些想法:)

---

如果你想编辑我的最终代码，你可以去在线编辑器（ 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>

Answer 1

这是创建语音气泡的代码。 您也可以在此处更改变量和指针位置

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

Answer 2

这个 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 演示。