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

Question

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

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

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

如果您想编辑我的最终代码，可以转到在线编辑器（https://jsfiddle.net/ypgou3wy/）

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<div class="logo logo1">

</div>

<div class="logo logo2">

</div>

<div class="logo logo3">

</div>

<div class="logo logo4">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里是创建语音气泡的代码。您也可以更改变量和指针位置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;
}

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 demo。