Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

CSS Shapes

Felipe Bohórquez - December 28, 2020


Let’s go ahead and create some fun CSS shapes! Follow my Codepen for all the code. Let’s do this.

Rectangles and Squares

All our shapes will be wrapped in a div. The most basic shape is the square and the rectangle since by default the div is a square or rectangle depending on the width and height properties. So the square has equal width and height whereas rectangle doesn’t:

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

Reminder : We use rem which is based on the root font-size and allows for easy scale. This is default on the browser (usually 16px). We set our font-size to 20px, so 2rem is 40px.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Circle

We’ll go ahead and create a circle for a profile image. To create a circle is similar to the square but we need to specify the border-radius. To round the corners, it will have to be at 50%. If we want an oval we’ll modify the width/height in a similar vein as the rectangle.

Let’s make our profile image:

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

Note : The background properties are to get the image, size it, and center it.

Parallelogram

We can also make a parallelogram. This shape can be useful when adding a cool text effect. Here we’ll use the transform property and we’ll use the skew value to transform the shape (and anything inside) as a parallelogram with either 20 or -20 degrees.

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

Looks cool right 😎

Other Shapes

Now that we have some knowledge of CSS shapes and its uses, we can take a look at other shapes. All of them you can play for yourself on my Codepen .

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

While there are many ways to do a heart, and you can find many iterations of it online, this one is pretty straightforward.

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

Go ahead and play with the percentages and change the colors. You can see how the heart is being built. So we can see how with the ::before and also ::after pseudo-elements we can make some cool shapes.

Also, with the polygon() function we can specify other shapes, expanding our limits.

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

Do check this clip-path maker , a cool tool that will generate for you the code for a bunch of shapes!

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Felipe Bohórquez

About the author: Felipe Bohórquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.

Skip to main content