[zelda_pinwheel]

jellby's code for non-rectangular images (post 13) can be adjusted for images which are narrower on the top than on the bottom. after playing a bit i've found that just adding a negative margin to the top div (containing the image) seems to work just fine : i just added the code

div#piano {
     margin-left:-4.5em;
}

note, i wanted this image on the right side of the page, so my class names and floats are right instead of left in the original code.

here's all of it :

  
div.rightpic {
  float: right;
  clear: right;
  text-align: right;
  margin: 0 0.5em 0.5em 0; 
 border: solid green 1px;
}
  div.rightpic img {
  width: 100%;
}
/* Piano Image size: 212 x 501
/* width of the narrow top part :140px 
/* Height of the narrow (top) part: 180px
/* Width of the narrow part: 212*/

div#piano {
  max-width: 212px;
  width: 14em;        
  max-height: 10em;
  border: solid red 1px;
  margin-left:-4.5em;
}
div#piano + div.rightpic {
  width: 13.5em; 
  height: 21em; 
  margin-top: -0.5em;
}

i've attached my example (with borders to show the divs) and the original image, if you want to try it out.