10 Examples of Unorthodox Shapes Created with CSS

Sometimes it feels like we have a lack of creativity when it comes to building CSS containers. They’re either round, somewhat-round, square or rectangular. They get the job done, but aren’t especially unique or exciting.

But with modern CSS and an occasional dash of JavaScript, we can design containers that really stand out amongst the circles and squares. In fact, taking a short jaunt through CodePen provides plenty of inspiration in this area.

Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.

Notched Boxes

Chris Coyier of CSS-Tricks fame built this example that, while subtle, offers a much fresher take on the standard box. By simply angling off the sharp edges, we have a more nuanced look. This type of effect provides a much more artistic feel while maintaining usability.

Angled Full-Width Image

Images (or any container) that stretches out over the full-width of the viewport can really benefit from doing something a bit different in terms of shape. The angled borders we see in this example are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.

Accent Containers

While we often use containers as places to hold content, they can also make for nice design accents. Take this example, where a few shifts of CSS border-radius create an interesting effect that also complements the content below.

Windows (Not That Kind)

CSS clipping paths can do some amazing things. They bring one of the staples of print design into a more interactive medium. Here, we have a clip-path used to create a window-shaped effect around a set of images – complete with beautiful hover animation.

Diamond Navigation Menu

What I love about this series of diamond-shaped buttons is that they turn what could be boring (a collection of navigation links) into something unique. While this may not be 100% simple to maintain in the long-term (adding items would require more CSS), it shows that you don’t have to settle for ordinary.

Diagonal Animation

As they say, why not make your entire page a non-standard shape? Okay, they probably don’t say that. But here we have an example of someone who did create a full-screen animation that bends along with your cursor position. One practical use might be to allow users to “reveal” an object hidden underneath.

The Famous Exploding Polygons

Polygon shapes are being used quite often in web design, but not necessarily in the same way as this example. Here they are used to build a letter (“J”, in this case) that explodes as you hover over it. It makes for an interesting logo and can add a bit of unexpected fun to a website.

A Curvaceous Container

Shaping text around an image is another one of those print effects that isn’t quite so easy to port over to the web. It takes some extra effort, but here’s a look at how stunning it can be. The whole container just has much more of a natural flow to it than one with standard squared-off text.

Corner Shaping

Buttons are another element where we too often settle for standard shapes. But in the right setting, something different can be quite welcome. These buttons not only have various notched-corners, but they also offer a shape-shifting hover animation as well.

A Badge of Honor

The good old badge is great for calling attention to a specific piece of content. However, we often see it used as an image. This example uses pure CSS (err, Sass) to create the same effect. What’s nice about this setup is that you could pair this up with a CMS like WordPress to make the contents of the badge dynamic. It looks great and would save plenty of Photoshop work.

The Shape of Things to Come

The use of shaped containers can open up the doors to all kinds of creative looks and layouts. And with the advent of techniques such as CSS Grid, it’s now possible to implement shapes on a much larger scale.

While the examples above may not be a perfect fit for every use case, they are proof that the web is slowly-but-surely moving beyond the basics. So, for your next project, try to literally think outside the box (or circle).

The post 10 Examples of Unorthodox Shapes Created with CSS appeared first on Speckyboy Web Design Magazine.