I came across a site that displayed a quote in a box, you know, the one with a little triangle thing at the bottom to indicate dialog or something. I’ve never worked on a project that required me to style a quote in this way, so I was curious to know how to create one. Here’s a preview of what I came up with:
First, I needed some markup to set the whole thing up. I wrapped everything in a
container class just to control the size for this demo:
Then I added a wrapper class for the quote, I called it
And then the actual quote split in two areas, quote text and name, styled by the classes
I applied some styling to the quote text and the name:
Nothing special so far. Here’s what will transform this box into a “quote” box. The following CSS creates a triangle looking thing by taking advantage of the way borders behave. I do that by creating an element after the quote that has no width or height but has a thick border. Styling the border color strategically creates a triangle. Then I positioned half of this triangle just below the quote and done! The position is relative so it can “move” with the box for responsiveness:
Here’s the whole thing put together. Feel free to change it around and make it yours.