How to Create Shapes with CSS3

What can you create with CSS shapes? After all, you can add a variety of basic shapes to your CSS style sheet by simply by using a bit of CSS3 coding. Why not see how you can use them on your site?

CSS shapes add interest to web pages. With browsers becoming increasingly more compatible, they can cut down on large, unnecessary images taking up space on your website. Changing colors and adjusting shapes could not be easier: Adjust a little CSS and watch your design take shape.

Basic Shapes

Let’s go over some simple shapes to start out. These are all fairly easy to use, but will still add some great visual interest to your site. The CSS is ready for you—just copy and modify to fit your needs.

Squares

Squares are arguably the easiest shape to make in CSS:

.square {
width: 100px;
height: 100px;
background: gray;
}

If you’d like a rectangle instead, simply adjust the width and height for either a horizontal or vertical rectangle.

Circle

A circle class can be a refreshing alternative to the usual square and rectangle images we’re so used to seeing across the internet. Here’s the CSS for a circle:

.circle {
width: 100px;
height: 100px;
background: red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
[/c

If you prefer, the border radius can also be half of the width and height measurement. For example, because the width and height are 100px, we could also list the border-radius as 50px.

Triangle

Let’s not forget about our three-sided friend. The triangle differs from the square and circle in that we need to include border declarations for left, right, and bottom. Notice that the width and height are set to 0. The borders are doing all the work here. The left and right are transparent while the bottom is set to 100px.

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}

Let’s compare a triangle that points up to one that points down. Most properties and values are the same in the two triangle examples. The one exception is the top border. We didn’t need a top border for the .triangle-up class, and for the .triangle-down class we don’t need a bottom border.

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

Complex Shapes

Now that we’ve covered the basics, let’s try working on some more complex shapes, like rhomboids, stars, and speech bubbles.

Rhomboid

You may have to think back to Geometry 101, but a rhomboid is simply a parallelogram whose adjacent sides are unequal and whose angles aren’t right angles. In other words, a skewed rectangle.

The 20deg refers to the tilt around the x-axis (the horizontal, if Geometry 101 is too far away). A margin-left of 25 is specified to allow for breathing room. If the shape is too far left, there is potential for it to be cut off. This ensures that the entire shape is included.

.rhomboid {
width: 250px;
height: 150px;
background-color: gray;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
margin-left: 25px;
}

Star

Creating a star is the perfect way to illustrate your rockstar CSS skills! Keep in mind our triangle from earlier in this post. A star is essentially putting three of those triangles together. We’re illustrating this with three different colors.

Looking at the code below, the .star-five class is purple, which is the left part of the star. The rotation is what puts this into place. The :before pseudo-element is what gives the star the red piece on top. The :after pseudo-element is the green portion of the star. It’s set to perfectly complete the shape.

.star-five {
margin: 50px 0;
position: relative;
display: block;
color: purple;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid purple;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}

.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
content: '';
}

.star-five:after {
position: absolute;
display: block;
color: green;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid green;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

Speech Bubbles

Want to add some dialog to your project? Sometimes a classic speech bubble is just what you need. Once again, the magic happens with the pseudo element.

.speech-bubble {
width: 120px;
height: 80px;
background: gray;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.speech-bubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid gray;
border-bottom: 13px solid transparent;
content: '';
}

From squares to speech bubbles, CSS3 is making it possible to create all sorts of shapes in the browser. Once you learn the basics, you can use these concepts to create your own unique shapes.

To ensure your project shapes up well, make sure you’re using the best possible WordPress hosting as the foundation for your site! Check out our plans to learn more.