PDA

View Full Version : Angular menus



tagnu
Dec 27th, 2011, 03:30 PM
Hi all,

Long time..

Hope some of you might have already encountered a similar menu design. Any clue on how to implement the design from the attached image in html/css? I'm planning to build an interactive flowchart.

Tagnu

sunfighter
Dec 27th, 2011, 05:03 PM
You could use an image of the arrow shape or you could try to do it in CSS3. Look here for a place to start http://www.css3shapes.com/. There is a url that allows you to fiddle with the settings to tweak your shape, but due to computer crash I don't have the url handy.

tagnu
Dec 28th, 2011, 06:53 AM
Thank you.

I was planning to go with images if nothing works out. Thank you for the CSS shapes link.

Let me try out some examples.

tagnu
Dec 31st, 2011, 02:52 PM
Combining two parallelograms solved it.
http://tagnu.freehostia.com/test/interactive-flowchart.html

Thank you.

Happy New Year!

auslin
Jan 1st, 2012, 03:43 AM
You could also include the -ms-transform declarations in your example, as they are supported by IE9:


.back{
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

.forward{
/* Skew */
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}

tagnu
Jan 7th, 2012, 12:14 PM
Thank you. Included.

mikepann83
Jul 1st, 2015, 07:16 AM
I understand this has been posted quite sometime back, nevertheless hope it helps someone reading in future. I don't think the site css3shapes.com works anymore. Instead, you can try w3schools.com and using an image is the simplest solution. May be you can use AngularJS as well along with this. If you are new to AngularJS consider reading this site: <a href="http://www.angularjstraining.in/">Angularjs training</a>

Thanks
Mike

mikepann83
Jul 1st, 2015, 07:18 AM
I understand this has been posted quite sometime back, nevertheless hope it helps someone reading in future. I don't think the site css3shapes.com works anymore. Instead, you can try w3schools.com and using an image is the simplest solution. May be you can use AngularJS as well along with this. If you are new to AngularJS consider reading this site: Angularjs training (http://www.angularjstraining.in/)

Thanks
Mike