Как реализовать окно чата на CSS

#html #css

Помогите сделать хвостик диалогового окна.
первый рис. - то, что сейчас есть;
второй рис. - тот хвостик, который надо сделать








  

    

    

      
Текст
    
  


.sreviews {
  color: white;

  max-width: 800px;
  margin: 50px auto;
}
  .sreviews div {
    max-width: 400px;
    word-wrap: break-word;
    margin-bottom: 12px;
    line-height: 24px;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

.clear {clear: both}

.sreviews .from-me p{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-size: 18px;
}
.sreviews .from-them p{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-size: 18px;
}

.from-them {
  position:relative;
  padding:20px 25px;
  background:#FFFFFF;
  border-radius:25px;
  color: black;
  float: left;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);


  &:before {
    content:"";
    position:absolute;
    z-index:2;
    bottom:-2px;
    left:-7px;
    height:20px;
    border-left:20px solid #E5E5EA;
    border-bottom-right-radius: 16px 14px;
    -webkit-transform:translate(0, -2px);
  }

  &:after {
    content:"";
    position:absolute;
    z-index:3;
    bottom:-2px;
    left:4px;
    width:26px;
    height:20px;
    background:white;
    border-bottom-right-radius: 10px;
    -webkit-transform:translate(-30px, -2px);
  }
}

    

Ответы

Ответ 1

Вот, вроде хорошо получилось, но с размерами можно поиграться.



div {
  float: left;
  background: silver;
  padding: 1em 1.5em;
  border-radius: 1em;
  position: relative;
  line-height: 1.5em;
}

div::after, div::before {
  content: "";
  position: absolute;
  left: 100%;
  bottom: .5em;
  width: 1.8em;
  height: 1.8em;
  border: .5em solid white;
  border-radius: 50%;
  background: blue;
}

div::before {
  border-top: none;
  height: .9em;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: silver;
  border-color: silver;
  margin-left: -.9em;
}
Just a message