From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Create a speech bubble

Create a speech bubble - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Create a speech bubble

“

- [Chris] Hi, this is Chris Converse and in this episode, we'll create a speech bubble shape using only CSS, in order to give our block quote more visual appeal. So if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in a text editor. So when you have the HTML file open, you'll see we have the link to style that CSS up in the head, we'll be opening this in a moment. If we scroll down, our quote is inside of a block quote element. Inside of the block quote, we have the actual quote and then we have our citation here with a photograph and the attribution. So what we're going to be doing is adding a circle around this content here and then adding a triangle, both with CSS, to create that speech bubble shape. So to continue on, let's go back to the exercise files and let's open up style.css in our text editor. So with the CSS file open, the first thing that we'll do is scroll down and make an adjustment to the block quote element so that we…

Contents