CSS3 Shapes: A Basic Tutorial for Beginners

Udemy Editor

If you’re a beginner to CSS3, you have likely taken a look at some sites that have some amazing features, and you’re probably wishing you could do those same things. This is a basic introduction on creating shapes for CSS3. Learn how to design your website with CSS3 and HTML5.

There’s a good number of basic shapes that can be added to cascading style sheets simply by using a bit of CSS3 coding. You can add circles, squares, triangles that point in different directions and have different angles, trapezoids, rectangles, and so much more. If you need help with the basics of CSS, try a beginner’s course. While this particular CSS course is not for CSS3, it will give you the basics that can easily be updated for CSS3.

The coding and an example symbol are listed below. You can change certain parts of the coding to make your shapes different sizes or different colors. Certain shapes have specific rules for how certain pieces have to be changed, and those specifications will be listed with the shape. Learn how to wireframe your website with HTML5 and CSS3.

Adding a Circle

The coding of a circle should be familiar even to a beginner CSS3 learner. Input the following coding into your CSS3 document to create a circle:

#circle {
 width: 200px;
 height: 200px;
 background: green;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 }

When done correctly, you should end up with a shape that looks something like the one below. Keep in mind that your radius definitions need to be half the pixels of the width and height of the circle, or you will end up with a rounded corner square like the one pictured below the circle.

A circle made with CSS3

A square with rounded corners. This will happen if your radius definitions are not half the size of the pixels defining the height and width of the shape.

Adding a Square

Use the following code to create a square in your CSS3 document:

#square {
 width: 250px;
 height: 250px;
 background: purple;
 }

Your square will look similar to the one pictured below.

A square made with CSS3

Adding a Rectangle

If you’re familiar with geometry, you will know that all squares are rectangles, but not all rectangles are squares. This is because squares must have four equal sides, but a rectangle only needs to have two sets of matching sides. Use the coding below to add a rectangle to your CSS3 document:

 #rectangle {
 width: 200px;
 height: 100px;
 background: orange;
 }

Your rectangle will look something like the image below.

A rectangle made with CSS3

Adding a Triangle

There are many different triangles you can input into your cascading style sheets depending on the border used and the size of the border. Use the coding below to add different triangles to your CSS3 document:

Creating a Triangle Pointing Upward

#up-triangle {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;
 }

A triangle pointing up created with CSS3

To make your triangle point upward, your bottom border will need to have the most pixels and have the only color in the shape. There will be no top border.

Creating a Triangle Pointing Downward

#down-triangle {
 width: 0;
 height: 0;
 border-top: 100px solid yellow;
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;
 }

A triangle pointing down created with CSS3

To make your triangle point downward, you will have no bottom border but rather a top border. This border will be the largest border and the only border with color.

Creating a Triangle Pointing Right

#right-triangle {
 width: 0;
 height: 0;
 border-left: 100px solid red;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 }

A triangle pointing right created with CSS3

Creating a Triangle Pointing Left

#left-triangle {
 width: 0;
 height: 0;
 border-right: 100px solid pink;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 }

A triangle pointing left created with CSS3

Creating a Triangle with a Right Angle

#triangle-topleft {
 width: 0;
 height: 0;
 border-top: 100px solid blue;
 border-right: 60px solid transparent;
 }

This is a triangle with a right angle created using CSS3

Changing the first border to top or bottom will decide whether your right angle will be at the top of the triangle or the bottom of the triangle. Changing the second border to right or left will decide what corner the right angle will be in. Changing the number of pixels will change the size of the triangle. Here’s another example of a triangle with a right angle:

#triangle-bottomright {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-left: 100px solid transparent;
 }

This is a triangle with a right angle in the bottom right corner created with CSS3

Adding a Trapezoid

Here’s the code to add a trapezoid to your CSS3 document:

#trapezoid {
 height: 0;
 width: 100px;
 border-bottom: 100px solid orange;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 }

Your trapezoid will look something like the image below.

This is a trapezoid made with CSS3

You can also make your trapezoid larger at the top and smaller at the bottom by switching the bottom border for a top border instead. Be careful about the number of pixels you use for the left and right borders as too large of borders will create a triangle instead.

Using CSS3 to Add More Complicated Shapes

You can create more complex shapes using a lot more CSS3 coding. Some good examples of more complicated shapes are parallelograms, certain stars, shapes with more than four corners, speech bubbles, and more. Here’s some coding for some more complicated shapes. You can also find some links to other shapes in the resources below.

Adding a Parallelogram

Use this code to create a parallelogram in your CSS3 document:

#parallelogram {
 width: 200px;
 height: 100px;
 background: pink;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 transform: skew(20deg);
 }

This parallelogram pictured below was cut off because it was too close to the coder’s left margin. This is a good example as to why it would be a good idea to set margins for some shapes.

A parallelogram created with CSS3 and cut off by the left margin

An example of the parallelogram code with margins is below.

#parallelogram {
 width: 200px;
 height: 100px;
 background: pink;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 transform: skew(20deg);
 margin-left: 25px;
 }

A parallelogram with a left margin defined

Adding a Speech Bubble

Use the code below to add a speech bubble to your CSS3 document:

#speech-bubble {
 width: 120px;
 height: 80px;
 background: black;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 margin-left: 20px;
 }
 #speech-bubble:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid black;
 border-bottom: 13px solid transparent;
 margin: 25px 0 0 -25px;
 }

Here is an image of the speech bubble. In order to prevent the shape from being cut off, be sure to define a left margin in the #speech-bubble code.

A speech bubble created with CSS3

Adding a Curved Arrow

This particular shape can make it easy for you to point out important items on your webpages. Here’s the code to add a curved arrow:

#curvedarrow {
 position: relative;
 width: 0;
 height: 0;
 border-top: 9px solid transparent;
 border-right: 9px solid green;
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 margin-left: 10px;
 }
 #curvedarrow:after {
 content: "";
 position: absolute;
 border: 0 solid transparent;
 border-top: 3px solid green;
 border-radius: 20px 0 0 0;
 top: -12px;
 left: -9px;
 width: 12px;
 height: 12px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 }

An example arrow is shown below. Please note that this is a blown up image of the arrow as the code above creates a smaller arrow. Be careful when changing the pixelization in the above code as you could end up with an image that looks nothing like an arrow.

A curved arrow created using CSS3

Adding a Facebook Icon

If you plan to share your Facebook information on one of your webpages, you could add an awesome Facebook icon created with CSS3. This was created by Nathan Swartz.

#facebook-icon {
 background: blue;
 text-indent: -999em;
 width: 100px;
 height: 110px;
 border-radius: 5px;
 position: relative;
 overflow: hidden;
 border: 15px solid blue;
 border-bottom: 0;
 }
 #facebook-icon::before {
 content: "/20";
 position: absolute;
 background: blue;
 width: 40px;
 height: 90px;
 bottom: -30px;
 right: -37px;
 border: 20px solid #eee;
 border-radius: 25px;
 }
 #facebook-icon::after {
 content: "/20";
 position: absolute;
 width: 55px;
 top: 50px;
 height: 20px;
 background: #eee;
 right: 5px;
 }