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 star

Create a star - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Create a star

“

- [Instructor] Hi, I'm Chris Converse, and in this episode, we'll create three triangles with CSS, then rotate and overlap them to create a star shape. 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 once you have the HTML file open, and if you also open this in a browser, you'll see we have a pretty simple layout here. So what we're gonna be doing is adding a star, and positioning it here right above this article element, or overlap it so that the border goes underneath. So to do this, in the HTML, the first thing we need to do is create a div element where we're going to create our star. So inside of the article element, let's add a div element. Let's set a class equal to two quotes, then type in star inside of the quotes, and then end the div element. With this in place, hit save. Then we're going to open up style.css, which we're linking to here in the head area. So let's go back to the exercise files…

Contents