Chat bubble

html #ui#svg
<div>
  <svg width="13" height="14" fill="hsl(23, 100%, 50%)">
    <path
      d="M6 .246c-.175 5.992-1.539 8.89-5.5 13.5 6.117.073 9.128-.306 12.5-3L6 .246Z"
    ></path>
  </svg>
  <span>Testing a chat bubble</span>
</div>

<style>
  div {
    margin: 0 0 0 4px;
    position: relative;

    span {
      background-color: hsl(23, 100%, 50%);
      color: white;
      font-family: Verdana;
      font-size: 12px;
      border-radius: 14px;
      padding: 6px 12px;
      display: block;
      width: fit-content;
    }

    svg {
      position: absolute;
      left: -5.5px;
      bottom: 0.246px;
    }
  }
</style>