title: Non-Rectangular Image GWT Button
body: <p>I am trying to create a custom GWT Button based on an image.</p>
  
  <p>I have an image that is not rectangular, something like this:<br><br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/oLP8z.png" alt="Yellow Triangle Image">
  <br><BR></p>
  
  <ol>
  <li>Now, I want the <strong>click-able</strong> area to only work inside the visible parts of the image (non-transparent areas).  This would mean that it's possible for someone using the button to click in the transparent corners of the image (Button) and not trigger the click event on the Button.  Is this possible without having to create a custom widget (and the HTML to go with it)?</li>
  <li>I would like to make a set of these non-rectangular buttons, in which there would be other buttons that would inter-connect with this one (their visible edges will bump right up against eachother, in sort of an inter-locking pattern), sort of like this:<br>
  <img src="https://i.stack.imgur.com/d3CFx.jpg" alt="Inter-Locking Triangles">
  <br>That's a very complex example, mine wouldn't be as big/many but the concept holds: inter-locking buttons of custom shape each being an individual button.  These buttons would not be generated statically, but grow based on action.</li>
  </ol>
  
  <p>Is this even possible?  I have no clue where to begin.  The 2nd picture (pyramid inter-locking triangles) is more complex than what I'm envisioning, but the concept holds.  The reason it's more complex is because ultimately I would only be inter-locking buttons Horizontally (think of the 2nd row near the top of the pyramid picture, <em>the 3 triangles from left to right</em>).</p>