Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a dynamic shape with pure CSS3

Creating a dynamic shape with pure CSS3


I am very proficient in CSS but I can't for the life of me figure this one out.

I need to recreate a number of shapes in Pure Css (if possible) for a project. What makes it even more harder is that I need the shapes to use a background images. I have tried numerous CSS3 properties such as skew, transform, rotate etc... however none has worked so far. Skew got me closest but the background and it's contents where skewed. I tried setting an image inside the div and giving it opposite properties to the div skew which straightened the image but then I couldn't position the image correctly.

Is it possible in anyway to recreate this using CSS?

Even if someone can help me find the right property to use so I can research how it'll be done that would be helpful.

Thanks in advance.

Problem courtesy of: kala233


Difficult shape to make this one. You can create this shape using clip-path but I'm afraid the support is not amazing for this property.

See the support here.

Now here is an example of the shape with a background.

.shape {
  width: 400px;
  height: 400px;
  background: #000;
  -webkit-clip-path: polygon(24% 0, 100% 20%, 100% 100%, 0 40%);
  clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%);
  background-image: url(;
  background-size: cover;
Solution courtesy of: Ruddy


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating a dynamic shape with pure CSS3


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription