Sample code sharing on how CSS implements the irregular navigation menu for background images

in general, the background image of the navigation menu is more regular, but usually we also encounter a lot of background image shape irregular navigation bar (for example, but when the mouse moved, the background image is irregular, this example only discusses this type), as shown in:

( figure I )

When the mouse moved up the background into a red arrow, perhaps, I see, I think this effect and there is no special place, but carefully look at my picture of the green box, you will find that each piece is connected together will not be disconnected; If you do it in the usual way, it might be the effect shown:

(Figure II)

That is, the block is disconnected from the block.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">