CSS3 Shape Malformed in Chrome

So I’m using CSS3 to create a shape as a button and Chrome is not playing nice on this page. The shape looks fine in IE and FF. The screenshots show the issue.



Not sure why Chrome isn’t playing nice.

Usually you would set the parent to position:relative and then absolutely place the arrow to avoid any disruption to the flow. Setting the arrow to absolute will make it a ‘block’ element and the dimensions will take effect properly.

If you want to keep the arrow as position:relative then set it to display:block and change the top position to 8px.

Thank you, PaulOB.

I guess this proves that there is more than one way to skin a cat.

At first you were just torturing the cat, rather than skinning it. :stuck_out_tongue:

1 Like

You figured me out, ralphm.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.