Create a Quote Box with HTML and CSS

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:

HTML

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:

<div class="container">

</div>

Then I added a wrapper class for the quote, I called it quote-box:

<div class="container">
    <div class="quote-box">

    </div>
</div>

And then the actual quote split in two areas, quote text and name, styled by the classes quote and name respectively:

<div class="container">
    <div class="quote-box">
        <div class="quote">
            <blockquote>
                "The secret of getting ahead is getting started. The secret of getting started is breaking your complex overwhelming tasks into small manageable tasks, and starting on the first one."
            </blockquote>
        </div>
        <div class="name">
            Mark Twain
        </div>
    </div>
</div>

CSS

I applied some styling to the quote text and the name:

/* Contain demo size */
.container {
    width: 400px;
}

.quote {
    background-color: #6b936a;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
    margin: 0;
    padding: 20px;
    font-size: 20px;
}

.name {
    background-color: #333;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

/* Reset */
blockquote {
    padding: 0;
    margin: 0;
}

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:

blockquote::after {
    border-color: transparent #6b936a transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 20px;
    top: 40px;
    content: " ";
    display: block;
    right: 75%;
    position: relative;
}

Here’s the whole thing put together. Feel free to change it around and make it yours.

See the Pen yObrMv by Mario Rodriguez (@mariordev) on CodePen.

Happy coding!