Generate CSS pattern for div

I need to create a hover (mouseover) pattern for my menu, similar to this (yellow hover pattern on the home):

Currently what I am doing is using 3 images together combined to generate one hover effect image. The left and right images remain as such, but the center image is set to repeat. This is because the menu items text can be of any length (Example: Home, Faqs & Contact, etc.). Reference screenshot:

Is there any other optimal solution to achieve this, other than using 3 images? Like for example: To create some sort of rough edges around the div in CSS. I am not sure how this can be done?

Thanks in advance.