Search code examples
htmlribboncss

How to make a shadow with box-shadow property equal on both sides

I am trying to make a simple (ribbon like) effect with box-shadow property , I have made it on the right side but on the left side the effect is not the same and I cant understand why! Does somebody have any idea?

My code: JSFIDDLE.

do i have to change something here maybe ?

box-shadow: 10px 10px 100px rgba(0, 0, 0, 10);
Solution

  • Do you mean like this ?

    Demo

    (I can't see where this seems a ribbon :)

    You need to promote the TD to an higher z-index (by using position: relative to make it works).

    Also note that the second parameter in box-shadow should be equal to both the sides, it is the (vertical) y-axis.

    And using <div>s for this kind of stuff is better, <table>s should be used for tabular data only.