1012–[CSS] Chat bubble with CSS triangle

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions

Background

We want to create the following chat bubble effect in CSS:

See the Pen CSS Triangle Example by Thomas Seng Hin Mak (@makzan) on CodePen.

Requirement

Given the following HTML:

<p>Something here.</p>
<div class='message'>
  Content goes here.<br>
  aoeuaoeuaoeuoe<br>
  aeuaoeuaoeu.
</div>
<p>Something here again.</p>

Help

❓ Show help content

Submission guideline

  • You may use Codepen to implement it and submit the link.
  • You may implement them in file and attach the HTML/CSS file via submission.