<blockquote dir="ltr" class="quote-bubble">
  <p class="quote-bubble__quote">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam debitis facilis autem doloremque. Excepturi debitis nam est reprehenderit deserunt, consequuntur molestiae. Pariatur deleniti voluptatibus laboriosam eius vel a necessitatibus eos.</p>
  <cite class="quote-bubble__author">Very Famous Person</cite>
</blockquote>

<blockquote dir="rtl" class="quote-bubble">
  <p class="quote-bubble__quote">ومن وتزويده المجتمع أم, ٣٠ قام عملية الشهيرة. يكن الأمريكي الأوربيين أي. الحرة والروسية يكن عن. شاسعة وقامت بين أن, إذ دار هنا؟ أحدث والقرى, في حلّت فاتّبع بال.
  </p>
  <cite class="quote-bubble__author">Very Famous Person</cite>
</blockquote>
.quote-bubble__quote {
  padding: 1em;
  position: relative;
  border: 3px solid #08c8cb;
}

.quote-bubble__quote::after {
  content: url("data:image/svg+xml; utf8, <svg width='36' height='35' viewBox='0 0 36 35' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.00684 1.49023H33.0068' stroke='white' stroke-width='4'/><path d='M1.56152 1.49023L8.42899 31.4902L35.176 1.49023' stroke='%2308C8CB' stroke-width='3'/></svg>");
  position: absolute;
  bottom: -39px;
  left: 23%;
}
[dir="rtl"] .quote-bubble__quote::after {
  right: 23%;
}

.quote-bubble__author {
  margin-top: 39px;
  display: block;
  padding-inline-start: calc(23% - 3em);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.