如何用纯CSS创建小三角会话气泡

<div class="speech-bubble one"></div>
<div class="speech-bubble two"></div>
<div class="speech-bubble there"></div>
<div class="speech-bubble four"></div>

.speech-bubble {
  border: 1px solid rgba(0,0,0,0);
  display: block;
  padding: 15px;
  position: relative;
  margin: 20px auto;
  height:100px;
  width:400px;
  border-radius: 5px;
 
}
.speech-bubble.one,
.speech-bubble.there {
    background-color: #DDD;
}
.speech-bubble.two ,
.speech-bubble.four{
    background-color: #fff;
    border-color: #DDD;
}
.speech-bubble:before{
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-right: 15px solid #DDD;
  border-bottom: 7px solid transparent;
}   
.speech-bubble.two:after{
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-right: 14px solid #FFF;
  border-bottom: 6px solid transparent;
}
.speech-bubble.there:before {
    right: -13px;
    border-left: 15px solid #DDD;
    border-right: 0;
    left: auto;
}
.speech-bubble.four:before {
    right: -15px;
    border-left: 15px solid #CCC;
    border-right: 0;
    left: auto;
}
.speech-bubble.four:after{
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-left: 14px solid #FFF;
  border-bottom: 6px solid transparent;
}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/308

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！