Is it possible to make this shape in CSS3?
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– matewka2013-10-23 07:46:10 +00:00Commented Oct 23, 2013 at 7:46
-
See CSS 3 3D transforms. 24ways.org/2010/intro-to-css-3d-transformsMing-Tang– Ming-Tang2014-07-18 00:14:04 +00:00Commented Jul 18, 2014 at 0:14
Add a comment
|
2 Answers
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/
4 Comments
matewka
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
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.
Jignesh Kheni
i know this is not exactly the same as OP's image but my code might help him.
user1118829
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.
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.
3 Comments
user1118829
Thank you. It works nicely, but if I remove the image "<img src="i.sstatic.net/OsNL8.jpg">" it's not smooth from the top.
user1118829
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
matewka
Fiddle updated. Of course
-webkit-backface-visibility property is only for Chrome.