CODEWITHSUNDEEP
htmlcsstransformcss-shapes
kala233
kala233

Reputation: 549

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?

enter image description here

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.

Upvotes: 1

Views: 1423

Answers (2)

Ruddy
Ruddy

Reputation: 9923

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(http://p1.pichost.me/640/39/1629941.jpg);
  background-size: cover;
}
<div class="shape"></div>

Upvotes: 3

Luke Robertson
Luke Robertson

Reputation: 1652

This will give a diamon so you can tweak it to get your shape :

#diamond-narrow {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid red;
    position: relative;
    top: -50px;
}
#diamond-narrow:after {
    content: '';
    position: absolute;
    left: -50px; top: 70px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
}

http://css-tricks.com/examples/ShapesOfCSS/

Upvotes: 1

Related Questions