Okay we’re just getting started, but the above code does two things. Firstly, it sets up our <p> tag to have a little padding, a little styling, something we can be proud to show mom. I’m also using the Open Sans font in my screenshots, but of course any font you want will work just fine. Secondly, we’re using the :after pseudo element to create a little triangle. Essentially, we create the triangle by making a content-less, 0 width, 0 height element with some fancy tweaks to our borders. The absolute positioning works specifically well for this application, but you may need to adjust top and right values depending on what the size of your paragraphs will be.

We could go on and on, try adjusting the positioning and swapping out the borders on the :after triangles to get them to go vertically and horizontally. Add in an avatar or two, maybe a non-obtrusive time stamp and you’ve got yourself a smorgasbord of possibilities.