WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Diagonal menu buttons using images

Reply
  Thread Tools Display Modes
Old 7th July 13, 07:27 PM   #1
killthepixelnow
WLC Member
 
Join Date: Jul 2013
Posts: 1
Default Diagonal menu buttons using images

Hello everybody, I'm trying to create a menu that has irregular buttons. I've checked some information concerning pure CSS diagonal buttons. However, I am trying to achieve the same result using images. By the way, these are 'simple' buttons, there's no drop-down menus associated with them.



I'm using also vertical lines to separate each button so, it goes like this:
Line | Button | Line | Button...

Any idea how achieving this effect using <ul> and <li>.

Thanks a lot for your help!
killthepixelnow is offline   Reply With Quote
Old 8th July 13, 01:47 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Diagonal menu buttons using images

Well, HTML works on square boxes, so even though you can achieve this effect by using negative margins to overlap, you'll still have the corners that are technically the other button activate the wrong one. But considering the average population clicks the middle of the button, that isn't a problem.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 8th July 13, 10:26 AM   #3
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Diagonal menu buttons using images

well you could use css transform:rotate(xdeg);
but it will require a bit of fiddling to get the top and bottom trimmed.
but you will get the angled sides and the corners will be for the item selected.
Phreaddee is offline   Reply With Quote
Old 8th July 13, 10:33 AM   #4
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Diagonal menu buttons using images

actually transform: skew(-22.5deg, 0deg);
would be more appropriate.
Phreaddee is offline   Reply With Quote
Old 8th July 13, 08:31 PM   #5
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Diagonal menu buttons using images

Another option: pseudo elements. Works as well as Phreaddee's, but with a good bit deeper browser support (all modern & IE8+).
http://codepen.io/ronaldroe/pen/osLbm

Last edited by ronaldroe; 8th July 13 at 08:53 PM.
ronaldroe is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:25 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.