CSS usando rotate

Boa tarde Galera,

estou com um dificuldade no css usando rotate

preciso com que o bgcolor fique visualmente até a base da linha, pois quando eu boto as informações na <td> de baixo fica um "triangulo" vazio.

segue o codigo

.rotation
{
-ms-transform: rotate(-50deg); / IE 9 /
-webkit-transform: rotate(-50deg); / Chrome, Safari, Opera /

 transform: rotate(-50deg);
}

<table width="1700">
<tr>
 <td width="100">ID</td>
 <td width="300"><h1>Atividade</h1></td>
 <td class="rotation" bgcolor="#996600" width="100">Retrieval - TI</td>
 <td class="rotation" bgcolor="#99CC33" width="100">CSE - Gravadores</td>
 <td class="rotation" bgcolor="#CC3366" width="100">CSC - AI</td>
 <td class="rotation" bgcolor="#CC6699" width="100">CSC - NOC</td>
 <td class="rotation" bgcolor="#FF6633" width="100">CSC - GRAVADORES</td>
 <td class="rotation" bgcolor="#CCFFCC" width="100">PRD TI - Gest. Ambiente</td>
 <td class="rotation" bgcolor="#339999" width="100">PRD TI - BKP</td>
 <td class="rotation" bgcolor="#009999" width="100">Operações - Retrieval Op.</td>
 <td class="rotation" bgcolor="#66CC66" width="100">Field Services - Sites</td>
 <td class="rotation" bgcolor="#0066FF" width="100">Projetos / Engenharia</td>
 <td class="rotation" bgcolor="#99CC00" width="100">Qualidade</td>
 <td class="rotation" bgcolor="#FFFF33" width="100">Telemetria</td>
 <td class="rotation" bgcolor="#9933CC" width="100">Operações</td>
 </tr>
</table>

obrigado pelo apoio