Interestingly css clipping-paths seem to work at least in Safari and Chrome…
Have a look at https://css-tricks.com/clipping-masking-css/
And there is a tool which may help you work the paths out.
http://bennettfeely.com/clippy/
In my simple test the clipping path hid the outside of the shape and also restricted the mouse clicking to the inside.
Ion doing so it also allowed for them to be side by side and not cross over when rendered in the browser even if the clipping path elements are in the project.