Last post Aug 13, 2016 12:47 AM by bruce (sqlwork.com)
Jul 13, 2016 02:26 PM|AlainYahchouchiLebanon|LINK
I have a very complex design to achieve in css3... not regular triangles or squares but more complex shapes... I only saw online after searching easy triangles and squares css3 shapes.... I am struggling to achieve these css3 shapes:
Any help is appreciated.
Jul 13, 2016 03:12 PM|XIII|LINK
if these are images you could place them with CSS3, if you have to create them with CSS3 and HTML only then I suggest you would go for an alternative approach with SVG.
Jul 14, 2016 06:33 AM|AlainYahchouchiLebanon|LINK
can u kindly make an example for me, the first box..
Jul 14, 2016 11:09 AM|AlainYahchouchiLebanon|LINK
I have succeede in making a box with css:
-webkit-clip-path: polygon(10% 0, 89% 9%, 38% 47%, 3% 100%);
clip-path: polygon(10% 0, 89% 9%, 38% 47%, 3% 100%);
but it only works on chrome but not firfox or IE,,,, I have been reading to use svg for firefox and ie but can know how to make the svg work on firefox....
i need help in html and css of svg and the structure
Jul 14, 2016 11:20 AM|AlainYahchouchiLebanon|LINK
if someone can answer me my problem is solved...
how can I convert these css parameters -webkit-clip-path: polygon(10% 0, 89% 9%, 38% 47%, 3% 100%); in the svg points :
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
Aug 10, 2016 06:06 AM|XIII|LINK
I came along this page:
https://css-tricks.com/examples/ShapesOfCSS/ a while ago. You could make up your page in such a way that you could use these kind of shapes to make up the page you want. It'll cost you some headaches likely.
Another way could be to make use of SVG and create your page in Illustrator and use a plugin to export it to SVG.
Aug 13, 2016 12:47 AM|bruce (sqlwork.com)|LINK
while in theory you could build such a layout by hand (draw it then calculate the math, and the timings for animation), as suggested, you probably need a good designer tool like Adobe Creative Cloud (as was probably used to produce your sample) to do this