Is it possible to make this shape in CSS3?

Question

enter image description here

I saw this link http://css-tricks.com/examples/ShapesOfCSS/ , I don't know if any shape in this page can be edited to look like the shape i need.

Thank you..

Does it need to be __exactly__ the same as the picture? Because the left and right sides of this box aren't parallel. It makes the problem more complicated. — matewka, Oct 23 '13 at 07:46
See CSS 3 3D transforms. http://24ways.org/2010/intro-to-css-3d-transforms/ — Ming-Tang, Jul 18 '14 at 00:14

score 3 · Answer 1 · answered Oct 23 '13 at 07:51

3

put this to your css your shape div

 -webkit-transform: rotatey(16deg);
 -moz-transform: rotatey(16deg);
 transform: rotatey(16deg); 
 position: absolute;

put this code your parent div of your shape div

-webkit-perspective: 175;
-moz-perspective: 175;
perspective: 175;
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

this code may be make shape that will you want and set height width and other css as your requirement. this code dont work on old browser like ie.

and you could make many type of shape with and css you want with the help of google web design software

here is link: https://www.google.com/webdesigner/

answered Oct 23 '13 at 07:51

jignesh kheni

1,282
1
9
22

Can you provide a fiddle in you answer? I'm very curious on the results but somehow I can't get `perspective` to work. – matewka Oct 23 '13 at 08:26
Thanks for the fiddle but I don't think this is exactly the same as the OP's image. Still I can't say if he wanted it to be exactly the same. We'll see. – matewka Oct 23 '13 at 08:37
i know this is not exactly the same as OP's image but my code might help him. – jignesh kheni Oct 23 '13 at 08:38
Your code is parallel from the sides, not like the image. But if I did not have a solution It think i will use Google web designer,nice idea! Thank you. – user1118829 Oct 23 '13 at 12:24

score 1 · Accepted Answer · edited May 23 '17 at 12:29

FIDDLE

Here is my approach:

div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;

    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
div:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #FFF transparent transparent;
    border-width: 127px 0 25px 19px;
    right: 0;
}
div:before {
    background: rgba(255, 0, 0, 0.45);
    width: 668px;
    height: 240px;
    content: "";
    display: block;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;

    -webkit-transform: rotate(-9.5deg) skewX(1deg);
    -moz-transform: rotate(-9.5deg) skewX(1deg);
    -ms-transform: rotate(-9.5deg) skewX(1deg);
    -o-transform: rotate(-9.5deg) skewX(1deg);
    transform: rotate(-9.5deg) skewX(1deg);
}

I guess, jingesh kheni's solution might be more clean but I tried it and somehow the perspective property doesn't work for me.

EDIT:
According to OP's comment about rough edges of the div, I updated the fiddle and the code above. I simply added this line of CSS:

-webkit-backface-visibility: hidden;

These rough edges are a bug in Chrome, here's the explanation.

Thank you. It works nicely, but if I remove the image "" it's not smooth from the top. — user1118829, Oct 23 '13 at 12:25
That's great! Thank you so much, but you probably want to edit the Fiddle to have the support of all browsers like the code you wrote above — user1118829, Oct 23 '13 at 13:55
Fiddle updated. Of course `-webkit-backface-visibility` property is only for Chrome. — matewka, Oct 23 '13 at 14:16

Is it possible to make this shape in CSS3?

2 Answers2