Turn Your Elements Into Shape 🔻🔴⚠ Shifters Using Just Css! [Examples And Tricks You Can Use Today]

Last Updated - Sat Jan 09 2021

taylor-swift-heart-hands Turn Your Elements into Shape Shifters Using CSS Shapes Examples and Tricks You Can Use Today

Originally the web was just plain square. Everything we did had to be some form a rectangle. That meant we had all those ugly hacks were remade those tables and sliced up images so we could get rounded corners.

Of course that changed several years back with the introduction of CSS shapes. These are made possible by a new battery of CSS properties and pseudo-elements.

Since then, it feels like the web is still mostly made of rectangles. But we do see a few shapes creep in here and there.

Today I thought to take a little bit of time and just review some of the cool shapes that you can make using nothing but CSS.

To get started let's look at a basic circle.

Example 1: Make CSS a Circle With a Border

The first example makes a circle using CSS. But before we get to an actual circle let's see the evolution of the shape.

I already mentioned the common hack we used to do in making a 9 x 9 table with cells loading sliced images to create circles and rounded corners.

The border-radius property is designed to allow you to create rounded corners. This was a big win for the web when it was introduced.

.rounded-corner-20 { border-radius: 20%; border: 3px solid #c30000; } <div class=""rounded-corner-20""></div>

In this example I created a style rounded-corner–20. it applies a 20% border radius and a three pixel red border.

I chose 20% because it made it easier to see the rounded corners. I also chose to append the 20 to the class name to indicate the amount of radius.

The border just makes it more explicit.

This is an example of making a uniform border radius for the element. Now we can leverage the concept to make a circle.

.circle { border-radius: 50%; }

Circles are easy because the border radius is the same all the way around. And to make a circle you just need to set the radius to half the element width, or 50%.

While I a circle!

Okay, circles are easy let's see what else we can do with border radius.

Let's make an ellipse.

The real trick to make an ellipse is not the border-radius properties, but the elements with to height ratio.

You can still use a border-radius of 50%, but it's easier to set the height and width ratio to 2:1.

In fact you can make all sorts of funky shapes by manipulating the height to width ratio and maintaining a border radius of 50%.

.oval-example{ height: 50px; width: 100px; } <div class="oval purple"></div>

Avatar in a Circle

The common application of making a circle is displaying a user's avatar. We also see this employed just about anytime you want to display somebody's mug shot on a web page today.

All you need to do is apply the circle class to the image and it will be made into a circle.

border-radius More Than Just Cicles and Elipse

So far I have shown how to manipulate shapes using border radius. I focused so far on circles and an ellipse.

But you can start doing some funky shapes just by manipulating the border radius.

The property accepts a variety of value formats, just like other properties like margin and padding.

Values can be assigned in a clockwise manor: top, right, bottom and left:

.roundish { border-radius: 5px 10px 15px 20px; }

Apply those values to the image creates a funky rectangle with a pointy top left corner and progressively more round corners as you move around the element.

CSS properties like border-radius, margin, padding, etc that can manipulate each side the rectangle will apply missing values using the following rules:

If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Three values: The second value applies to top-right and also bottom-left.

As you can see border-radius can be used to create a variety of simple and abstract shapes without needing images and other legacy hacks.

You are only limited by your imagination and time to play with shape shifting.

Make Triangles Manipulating the CSS border Property

Rounded corners were one of the top requests before CSS3 was implemented. I think the second most requested shape was a triangle.

There is no triangle property, but you can manipulate an element's border properties to create a triangle.

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

The element's size is set to 0. Instead it relies on manipulating three border properties: left, right and bottom.

Notice how each side are explicitly set. This is because the border-top is ommited or uses the default value of no border.

Because there is no top border set the browser will collapse the right and left border to the center point at a 45% angle.

The sides are set to transparent so they won't display. The bottom border's width should be set to the desired triangle height. The sides should be set to half the desired width.

I know that sounds counter intuitive. But what happens is the transparent sides clip the bottom border to form the triangle.

The border widths control how large the element renders.

To flip the triangle to point down, change the border-bottom to border-top.

For left and equilateral triangles set the top and bottom borders to the transparent values and the corresponding side to the example bottom-border value.

This code will create a nice right triangle that points up, down, left and right. Pretty basic.

An isosceles triangle can be created by manipulating the border width ratios. The border-bottom or height, should be set to more than 2X the side widths.

.isosceles-triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 200px solid #C30000; }

To create a right triangle you need to set just two border sides:

.right-triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid #C30000; }

Scalene triangles can also be created by tweaking the ratios:

.scalene-triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #C30000; }

By using different border widths the triangle skews you can create a variety of shapes.

Pretty simple, right?

Leveling Up By Transforming

So far you have learned how to create triangles that point either up, down, left or right.

But I can't leave you there.

You can rotate the triangle to any angle you want using the transform: rotate(X) property and value combination.

This example rotates the first triangle example 30 degrees to the right.

.rotate-30{ transform: rotate(30deg); } .up-triangle { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 120px solid #73bd2c; margin: 20px 0 0 30px; }

There are other transformations you can apply from here, but I will save that for another article.

In fact you can turn a basic square into a diamond with a transform. You need to pair a rotation by adjusting the origin or center of rotation:

.diamond { width: 100px; height: 100px; background: #a434d8; margin: 80px 0 0 90px;  transform: rotate(-45deg); /* Rotate Origin */ transform-origin: 0 100%; }

That was easy!

No pressure or millions of years required, just a simple CSS manipulation. Too bad real diamonds can be created that easy.

I am not done with using CSS transform to make shapes.

Let's make a parallelogram:

.parallelogram { width: 130px; height: 75px; transform: skew(20deg); }

This time the element has a skew applied that 'shoves' the top over at a 20 degree angle.

The CSS transform property is pretty cool because you can morph a standard rectangle into all sorts of odd shapes and angles.

It is not limited to just two dimensions either. You can also rotate and skew on the z axis as well.

It Gets Even Better with Pseudo Elements

CSS3 introduced a new set of hidden elements called pseudo elements. You can style these phantom elements using the :before and :after selectors.

For the first advanced trick let's create a 12 point star:

.twelve-point-star, .twelve-point-star:before, .twelve-point-star:after { height: 100px; width: 100px; background: #eda634; position: absolute; margin: 40px 0 0 30px; } .twelve-point-star:before { content: ""; transform: rotate(30deg); } .twelve-point-star:after { content: ""; transform: rotate(-30deg); }

The trick here is the CSS rules apply to three elements, when only one exists in the HTML. The real element's pseudo elements have the same styles set.

The main property to focus on is the absolute positioning. This causes the pseudo elements to render in the same location as the real element.

Next, each of the pseudo elements are rotated, one to the right and left, 30 degrees.

Finally each pseudo element has their content value set to an empty string. Without this the two elements would not render as expected.

The content property lets you set a text value in an element. Again, another article will explain this property.

The result is three elements are rendered in the same place on the page. The pseudo elements are rotated in opposite directions.

This creates an illusion of a single 12 pointed start.

You can also create a 6 pointed start using just the :after pseudo element:

.six-point-star, .six-point-star:after { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #cb1d1e; margin: 20px 0 0 30px; } .six-point-star:after { content: ""; margin: 30px 0 0 -50px; }

This time no transform is required. Just slightly adjusting the margin properties does the trick.

We can also make an octagon using pseudo elements.

.octagon { width: 100px; height: 100px; background: #2d9dcd; margin: 30px 0 0 40px; } .octagon:before, .octagon:after { content: ""; position: absolute; border-bottom: 30px solid #2d9dcd; border-left: 30px solid #fff; border-right: 30px solid #fff; width: 40px; height: 0; } .octagon:after { border-top: 30px solid #2d9dcd; border-left: 30px solid #fff; border-right: 30px solid #fff; margin: 70px 0 0 0; }

We use a similar border width manipulation trick we saw with triangles. It is also relies on absolutely positioned pseudo elements to create the illusion of a single element.

By combining border-radius, border property manipulation and pseudo elements we can create a pretty slick speech bubble.

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

And what application would be complete without an Easter egg!

.easter-egg { display: block; width: 126px; /* width has to be 70% of height */ /* could use width:70%; in a square container */ height: 180px; background-color: #73bd2c; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; margin: 20px 0 0 20px; }

And if you need to make a zombie website you will need to a bio hazard warning sign:

.biohazard { margin: 20px 0 0 20px; width: 0; height: 0; border-bottom: 60px solid black; border-top: 60px solid black; border-left: 60px solid yellow; border-right: 60px solid yellow; border-radius: 60px; }

Of course you always need to make a PacMan!

.pacman { margin: 20px 0 0 20px; width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid yellow; border-left: 60px solid yellow; border-bottom: 60px solid yellow; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }

An my favorite is a CSS Heart. This one coalesces most of the tricks into a finally that expresses my true feelings for you!

.heart { position: relative; margin: 20px 0 0 20px; } .heart:before, .heart:after { position: absolute; content: ""; left: 70px; top: 0; width: 70px; height: 115px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }

Summary

As you can see there are many shape shifting opportunities modern CSS make possible. The only limitations are your own imagination and time.

Since browsers began supporting CSS3 properties I have seen some pretty amazing shapes and objects created. We have come a long way from slicing images to create rounded corners!